Ionic propose un set d’icônes générique mais également des icônes spécifiques pour iOS et Android. Afin d’avoir une application avec un look “plus natif”, il est préférable d’utiliser ces icônes spécifiques. Cependant, le choix de ces icônes n’est pas effectué de manière automatique en fonction de la plateforme.

Plusieurs solutions existent, et notamment l’utilisation de ng-class afin d’appliquer la classe relative à l’icône de la plateforme correspondante.

Exemple :

$scope.platform = ionic.Platform;
<i class="icon" ng-class="{'ion-android-locked': platform.isAndroid(), 'ion-ios-locked': !platform.isAndroid()}" ></i>

Cette technique fonctionne très bien, mais n’est pas la plus élégante :

  • On modifie à la fois le controller et le template alors que c'est seulement de l'ordre du style
  • Cela ne favorise pas la lisibilité du template qui peut déjà être complexe
  • Si le bouton que l'on souhaite personnaliser est utilisé à plusieurs endroits, il faudra duppliquer le contenu

Si c’est seulement de l’ordre du style, alors pourquoi ne pas modifier uniquement le style ? Vous avez sans doute déjà remarqué que ionic applique une classe platform-android ou platform-ios dynamiquement à la balise <body> :

<body class="platform-android platform-cordova platform-webview"></body>

On peut donc s’en servir pour différencier la plateforme afin d’appliquer le bon icône.

Dans le fichier .scss concerné, on va se servir de la propriété @extend qui permet d’hériter du style d’un sélecteur :

// Default icon
.button-info { @extend .ion-android-search }

// Icon displayed on Android
.platform-android {
  .button-info { @extend .ion-android-more-horizontal; }
}

// Icon displayed on iOS
.platform-ios {
  .button-info { @extend .ion-ios-information-outline; }
}

Ainsi, mon button-info héritera :

  • Du style .ion-android-search par défaut
  • Du style .ion-android-more-horizontal sur Android
  • Du style .ion-ios-information-outline sur iOS

Une petite astuce pour vérifier que cela fonctionne sans builder sur devices/emulateurs différents :

$ionic serve --lab

Cela vous permet d’avoir la version iOS et la version Android côte à côte pour pouvoir comparer. Dans mon exemple, c’est le bouton d’information (en haut à droite) qui est personnalisé.

Personnalisation des icônes sous Ionic

N’hésitez pas à commenter si vous avez des remarques / questions.