Quantcast
Channel: Ionic Forum - Latest posts
Viewing all articles
Browse latest Browse all 228595

Clean way to use platform-specific icons

$
0
0

I have a question about Ionic icons. The official icons offered out-of-the-box are categorized into (1) generic, (2) iOS, and (3) Android (see http://ionicons.com). For example, if I want to include an arrow icon I can do something like:

<i class="icon ion-arrow-left-a"></i>

But if I want that icon to look nice and platform specific, I would want to use the iOS version like this:

<i class="icon ion-ios-arrow-left"></i>

The same applies for Android.

This leads to not-so-clean solution with ng-if and ng-class so that the class is conditionally applied. Another approach is to use mixins and generate the CSS depending on the target build platform. Here are some examples from StackOverflow:

I'm wondering if Ionic provides a solution where I just specify a generic icon class (e.g., on-arrow-left-a), and then based on the build target it replaced them with proper platform-specific versions (e.g., ion-ios-arrow-left for iOS).

Any ideas? Ionic folks, how do you do it? What's the best practice here? Ionic View is written in Ionic, did you guys have platform-specific icons (I have only checked the iOS version)?


Viewing all articles
Browse latest Browse all 228595

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>