ionic-contrib-icon

Automatically display platform-specific icons.

Install

First install the dependency using either Bower or NPM.

Bower

$ bower install ionic-contrib-icon

NPM

$ npm install ionic-contrib-icon

Include the ionic.contrib.icon module in your app's dependencies:

angular.module('app', ['ionic', 'ionic.contrib.icon'])

Use the icon directive:

<icon
    ios="ion-ios-heart"
    ipad="ion-ios-heart-outline"
    android="ion-android-favorite"
    windows="ion-heart-broken"
    default="ion-heart">
</icon>

Advanced Usage

Integration with Other Icon Libraries

You can make use of other popular icon libraries such as Font Awesome by defining the type option in the $ionicIconConfig constant:

app.constant('$ionicIconConfig', {
    type: 'fa'
});

* Note: The icon type corresponds to the appropriate library's icon CSS class. For Font Awesome, it is fa, while for Ionicons it is icon.

Define Icon Mappings

You can map default icons for each platform by defining the map option in the $ionicIconConfig constant. For instance, you can map the corresponding iOS and Android icon alternatives for the default ion-heart Ionicon:

app.constant('$ionicIconConfig', {
    type: 'icon',
    map: {
        'ion-heart': {
            ios: 'ion-ios-heart',
            android: 'ion-android-heart'
        }
    }
})

And then simply use the icon directive without having to add the ios and android attributes:

<icon default="ion-heart"></icon>

Special Cases

For any special cases, we support adding custom classes for specific icons by providing the class attribute:

<icon class="icon-xl" default="ion-home"></icon>

The directive also overrides any defaults when you explictly define icons for specific platforms.

Releases

• 0.0.3 (12/07/14):
  • Addition of iPad and Windows Phone platforms
• 0.0.2 (12/06/14):
  • Added support for other icon libraries (such as Font Awesome)
  • Added $ionicIconConfig constant to pass options
  • Can use icon mapping to define which icons get displayed by default for each platform
  • Minor bug fixes
• 0.0.1 (12/06/14):
  • Initial implementation of icon directive