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-appsync-add-elasticsearch-to-graphql-api-part-6/


Logo Lycée Paul Sérusier

J'enseigne au
Lycée Paul SERUSIER
Avenue de Waldkappel
29270 CARHAIX PLOUGUER
Tél : 02 98 99 29 29
Site : www.lycee-serusier.fr

footer2

Richard GAUTHIER
Professeur de Physique Appliquée
Certification ISN
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

www.carhaix2020.bzh