Platform specific icons

1

Hello,

how do you handle platform specific icons, for example I want ion-android-share on android and ion-share on iOS for my button icon.

Any suggestions?

Thanks

2

Ionic does add platform specific class to body like platform-ios or platform-android.
Then i would do something like this:
Less:

#App
{
  &.platform-ios{
     .ion-share:before {
       content: "ios";
     }
   }
   &.platform-android{
    .ion-share:before {
       content: "android";
     }
   }
}

with this you can use the class ion-share and it will be changing depending on android or ios.

i hope this helps

1 Like
3

Thanks for your answer. Unfortunately I do not complete understand your code. For me this only adds “ios” or “android” before my icon, it does not change the icon class itself.

Thanks again.

4

okay I ended up with this

.platform-android .ion-share:before {
  content: '\f2f8';
}

.platform-ios .ion-share:before {
  content: '\f220';
}

Thanks for your support.

5

the code is in LESS and compiled to CSS it would look this:

#App.platform-ios .ion-share:before {
  content: "ios";
}
#App.platform-android .ion-share:before {
  content: "android";
}

i did add android/ios just for showing, you have to use the right icon you want!