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)?