Ajouter une icône personnalisée dans Ionic 2

C'est le moyen le plus simple que j'ai trouvé, à partir des forums à https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/36.

Dans votre application .fichier scss , ajoutez le code suivant:

ion-icon {
    &[class*="appname-"] {
        // Instead of using the font-based icons
        // We're applying SVG masks
        mask-size: contain;
        mask-position: 50% 50%;
        mask-repeat: no-repeat;
        background: currentColor;
        width: 1em;
        height: 1em;
    }
    // custom icons
    &[class*="appname-customicon1"] {
        mask-image: url(../assets/img/customicon1.svg);
    }
    &[class*="appname-customicon2"] {
        mask-image: url(../assets/img/customicon2.svg);
    }
    &[class*="appname-customicon3"] {
        mask-image: url(../assets/img/customicon3.svg);
    }
}

Ensuite, dans vos modèles, vous pouvez utiliser le code HTML suivant pour créer l'icône:

<ion-icon name="appname-customicon"></ion-icon>

C'est beaucoup moins compliqué que d'utiliser les méthodes basées sur les polices. Tant que vous n'ajoutez pas des centaines d'icônes, vous devriez être d'accord avec cette méthode. Cependant, chaque image est envoyée comme une requête séparée, où, comme avec les méthodes de police, toutes les images sont contenues dans un fichier, ce serait donc un peu plus efficace.

Avec le courant ionic 3.3.0, vous pouvez utiliser la solution D'Anjum, mais vous devez changer

@import "ionic.ionicons";

À

@import "ionicons";

Dans src / theme / variables.fichier scss.

Trouvé cette solution à:

Https://github.com/yannbf/ionicCustomIconsSample/blob/master/src/theme/variables.scss

J'ai essayé d'implémenter Anjum Nawab shaikh answer en haut avec les icônes Sass sheet d'icomoon.

J'ai pu le faire fonctionner avec la version 2.2.2.

Dans le www/fonts du projet, j'avais ajouté le icomoon de fichiers:

icomoon.svg
icomoon.ttf
icomoon.woff
icomoon.eot
icomoon.scss

Dans icomoon.scss j'ai ajouté le scss suivant:

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?tclihz');
  src:  url('../fonts/icomoon.eot?tclihz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?tclihz') format('truetype'),
    url('../fonts/icomoon.woff?tclihz') format('woff'),
    url('../fonts/icomoon.svg?tclihz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"],
[class*=" icon-"],
[class^="ion-ios-icon"],
[class*="ion-ios-icon"],
[class^="ion-md-icon"],
[class*="ion-md-icon"]{

/* Didn't feel the need to @extend since this just adds to already existing .ion
code which I believe is replaced to just ion-icon tag selector in 
www/assets/fonts/ionicons.scss */

  font-family: "Ionicons", "icomoon" !important; //So just add this
}

//Mixin
@mixin makeIcon($arg, $val) {
  .ion-ios-#{$arg}:before ,
  .ion-ios-#{$arg}-circle:before ,
  .ion-ios-#{$arg}-circle-outline:before ,
  .ion-ios-#{$arg}-outline:before ,
  .ion-md-#{$arg}:before ,
  .ion-md-#{$arg}-circle:before ,
  .ion-md-#{$arg}-circle-outline:before ,
  .ion-md-#{$arg}-outline:before  {
    //important to overwrite ionic icons with your own icons
    content: $val !important; 
    font-size: 26px;
  }
}


//Adding Icons
@include makeIcon(email, '\e900');
...

Ensuite, j'ai fait une importation dans les variables.scss

@import "../www/fonts/icomoon";

Maintenant, nous pouvons ajouter ceci au modèle html:

<ion-icon name="email"></ion-icon>

Avant de démarrer : Assurez-vous d'avoir tous les fichiers svg dont vous avez besoin.

Maintenant aller ici : http://fontello.com/

Cet outil va générer votre police d'icône et le CSS nécessaire avec. C'est assez intuitif, il suffit de l'utiliser, de télécharger et de copier votre police où vous voulez dans votre dossier www mais Gardez la même structure de fichier. Pour terminer, il suffit d'intégrer votre fichier CSS dans votre fichier index.html et vous avez terminé!

J'espère que cela résoudra votre problème! ;-)

Selon l'équipe ionic:

Salut! À l'heure actuelle, il est limité à l'utilisation d'ionicons, car en dessous, il rend une icône d'ion, et c'est Gérer les différences de plate-forme. Vous pouvez ouvrir un problème et nous pourrions discuter de l'ajout de cette fonctionnalité

Vous pouvez voir toutes les réponses ici:

Https://forum.ionicframework.com/t/anyway-to-custom-the-tabbars-icon-with-my-own-svg-file/46131/16

Je trouve aussi ceci:

Https://www.npmjs.com/package/ionic2-custom-icons ,

Mais ne semble pas une solution intelligente (je préfère attendre une solution D'équipe Ionic).

Le meilleur scénario pour cela est d'utiliser old way, en créant une classe sur un fichier scss.

Pour ajouter des icônes personnalisées que j'utilise dans mon fichier scss:

.ion-ios-MYICON:before,
.ion-ios-MYICON-circle:before,
.ion-ios-MYICON-circle-outline:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-circle:before,
.ion-md-MYICON-circle-outline:before,
.ion-md-MYICON-outline:before {
  @extend .ion;
}

.ion-ios-MYICON:before,
.ion-ios-MYICON-outline:before,
.ion-md-MYICON:before,
.ion-md-MYICON-outline:before {
  content: 'your-custom-image';
}

Puis dans votre code HTML:

<ion-icon name="MYICON"></ion-icon>

Je pense que cette étape par étape par GerritErpenstein est très intuitive, cela fonctionne plutôt bien pour moi. Ma version ionique est 2.2.2. Littéralement, vous utilisez une phrase comme celle-ci et c'est fait:

<custom-icon set="star" name="iconostar"></custom-icon>

Https://github.com/GerritErpenstein/ionic2-custom-icons

Create Icon
ion-icon {
        &[class*="custom-"] {
          mask-size: contain;
          mask-position: 50% 50%;
          mask-repeat: no-repeat;
          background: currentColor;
          width: 0.8em;
          height: 0.8em;
        }

        &[class*="custom-rupee"] {
          color: yellow;
          mask-image: url(../../assets/Images/rupee.svg);
        }
        &[class*="custom-ballon"] {
          mask-image: url(../../assets/ballon.svg);
        }
        &[class*="custom-mouse"] {
          mask-image: url(../../assets/mouse.svg);
        }

      }
 And to use them
&lt;ion-icon name="custom-rupee"></ion-icon>
&lt;ion-icon name="custom-mouse"></ion-icon>
&lt;ion-icon name="custom-ballon"></ion-icon>