Setting platform specific icons in Ionic

Question

Okay, so this might be either a really simple question and I'll come away feeling sheepish but I've just gotten started using Ionic and I'm just playing around with detailing the UI with icons.

My question is whether or not you can set the icons in an element and have them render differently depending on which platform you build for?

For example, I had a menu item like so

<ion-content scroll="false">
  <ul class="list">
    <li class="item"><a href="#/login"><i class="icon ion-locked">Login</a></li> 
  </ul> 
</ion-content>

In Ionicons, there is a ion-locked icon for both android (ion-android-locked) and ios (ion-ios-locked)and I was wondering if there is a way to set icons to match their platform during the build process?

It may just be that I end up having seperate branches in git for this, but I'd rather not if there is a simple way to implement this?

Answer 1

You could customize you scss file.

Take a look you platform assets, index.html has a class

class="platform-android platform-cordova platform-webview"

//default
.your-search{
  @extend .ion-android-search;
}
.platform-android {
  .your-search{
    @extend .ion-android-search;
  }
}

.platform-ios {
  .your-search {
    @extend .ion-ios7-search;
  }
}