Pour mettre des icons personnalisés dans une application ionic, il faut réalise les étapes suivantes :
Etape 1 : Mettre les icons .svg dans le répertoire suivant :
/src/assets/icons/...
Etape 2 : Ajouter dans le fichier app.scss le code suivant :
ion-icon {
&[class*="prefix-"] {
mask-size: contain;
mask-position: 50% 50%;
mask-repeat: no-repeat;
background: currentColor;
width: 1em;
height: 1em;
}
// custom icons
&[class*="prefix-categories"] {
mask-image: url(../assets/icon/ic_categories.svg);
}
&[class*="prefix-menu"] {
mask-image: url(../assets/icon/ic_menu.svg);
}
}
Etape 3 : Mettre dans la page .html la balise suivante :
<ion-icon name="prefix-menu"></ion-icon>
Etape 4 : Pour appliquer d'autres styles aux icons, il faut ajouter le scss ci-dessous:
ion-icon.ion-ios-prefix-categories {
padding: 2px;
font-size: 14px;
}
Source : http://gonehybrid.com/ionic-4-