Matthew Merryfull Matthew Merryfull - 6 months ago 80
CSS Question

Setting platform specific icons in Ionic

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

Since Ionic Framework is built on Apache Cordova you can make use of the Apache Cordova Device plugin which ships standard with new projects:

https://github.com/apache/cordova-plugin-device/blob/master/doc/index.md

You can then do something like this:

yourApp.controller("ExampleController", function($scope) {
   $scope.devicePlatform = device.platform;
});

Then in your HTML you can reference the controller and show the icon based on the platform:

<i ng-if="devicePlatform === 'Android' class="icon ion-android-locked">
<i ng-if="devicePlatform !== 'Android' class="icon ion-ios-locked">

Notice the ng-if. Depending on what the $scope.devicePlatform is will decide which of the tags will show.

Regards,