Customizing platform-specific icons in Ionic

Question

Okay, so this may either be a very simple question, and I will leave feeling shy, but I just started using Ionic and I just play with the detailed user interface with icons.

My question is: can you set the icons in the element and change them depending on which platform you are building?

For example, I had a menu item similar to

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

Ionicons has an ion-locked icon for android ( ion-android-locked ) and ios ( ion-ios-locked ), and I was wondering if there is a way to set the icons according to my platform during the build process?

It is possible that for this I get separate branches in git, but I would prefer if there is an easy way to implement this?

Answer 1

Since the Ionic Framework is built on Apache Cordova, you can use the Apache Cordova Device plugin, which comes with new standards:

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

Then you can do something like this:

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

Then in your HTML you can reference the controller and display the platform-based icon:

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

Pay attention to ng-if . Depending on what $ scope.devicePlatform will determine which of the tags will be displayed.

Hi,

Answer 2

You can customize the scss file.

Take a look at your 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; } } 

Answer 3

As an alternative to Nic Robody, you can use ng-class :

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

HTML (using ng-class ):

 <i class="icon" ng-class="{ 'ion-android-locked': devicePlatform === 'Android', 'ion-ios-locked': devicePlatform !== 'Android' }"> 

Answer 4

You can use the CLI cordova hook, which replaces certain placeholders with the actual platform or the value of a specific platform. A prepare hook, for example, will be called every time you build. Like the "platform add to the body" hook that is generated by the yomen for the cordova project. The hook is part of the project, so it is under your control.

Here's a good overview on cord hooks: http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

Answer 5

The best solution is to use the ionic.Platform.platform () method to get the device platform below:

In your controller:

 angular.module('App', ['ionic']) .app.controller("appCtrl", function($scope) { $scope.devicePlatform = ionic.Platform.platform(); }); 

In your html:

 <i class="icon" ng-class="{ 'ion-arrow-left-c': devicePlatform === 'android', 'ion-ios-arrow-back': devicePlatform !== 'android'}"> Back</i> 

Answer 6

Pay attention to future Ionic 2 users who are faced with this question: with Ionic 2 RC2, the easiest way to accomplish this is with the “ios” and “md” attributes for the ion-icon tag. Here is an example with different icons for iOS and Android ("md" AKA Material Design):

 <ion-icon ios="ios-outline-lock" md="md-lock"></ios-icon> 

Answer 7

What is it worth almost 3 years later. Just create your own version of the v2 directive.

 function icon() { return { restrict: 'A', scope: {}, compile: function(element, attrs) { //change here for specific device default var platform = ionic.Platform.platform() || 'ios'; var iconClass = (platform === 'ios') ? attrs.ios : attrs.droid; element[0].classList.add(iconClass); } }; } angular .module('common.directives') .directive('icon', icon); 

 <i class="icon ion-iphone placeholder-icon" icon ios="ion-test" droid="droid-test"></i>