Comment utiliser les icônes de conception matérielle en angulaire 4?

Question

Je veux utiliser les icônes de https://materialdesignicons.com/ dans mon projet angulaire 4. Les instructions sur le site sont couvrant comment inclure dans Angular 1.x (https://materialdesignicons.com/getting-started)

Comment puis-je inclure les icônes du design des matériaux pour que je puisse les utiliser comme <md-icon svgIcon="source"></md-icon> en utilisant Angular Material et ng serve?

NOTE: J'ai déjà inclus les google material icons qui sont différents!

Answer 1

Il suffit de suivre les étapes suivantes:

1. Télécharger mdi.svg de here sous la Matériel angulaire section et placez-le dans votre dossier assets, qui devrait être situé à (de la racine de votre projet) /src/assets:

   

2. Dans le module (aka app.module.ts) de votre application, ajoutez les lignes suivantes:

   import {MatIconRegistry} from '@angular/material/icon'; 
   import {DomSanitizer} from '@angular/platform-browser'; 
   ... 
   export class AppModule { 
       constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer){ 
        matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityResourceUrl('/assets/mdi.svg')); 
       } 
   } 
   

3. Assurez-vous d'inclure le dossier assets sous .angular-cli.json dans assets (Bien que par défaut, il sera là):

   { 
       "apps": [ 
        { 
          ... 
          "assets": [ 
           "assets" 
          ] 
        } 
       ] 
   } 
   

4. Enfin, l'utiliser par l'intermédiaire du composant MatIcon avec l'entrée svgIcon:

   <mat-icon svgIcon="open-in-new"></mat-icon> 
   

---

Mise à jour

J'ai changé les instructions pour que cela fonctionnera pour les versions ultérieures.

Answer 2

Pour tous ceux qui utilisent SCSS:

npm install material-design-icons 

dans src/styles.scss

@import '~material-design-icons/iconfont/material-icons.css'; 

et en HTML comme décrit here

<i class="material-icons">visibility</i> 

Answer 3

similaires à la réponse par @ creep3007 , vous pouvez spécifier la feuille de style dans votre .angular-cli.json:

1. Installer le paquet de NPM

   npm install material-design-icons --save 
   

2. Ajoutez des icônes de matériel à votre .angular-cli.JSON

   { 
       "apps": [ 
       { 
        "styles": [ 
        "../node_modules/material-design-icons/iconfont/material-icons.css" 
        ] 
       } 
       ] 
   } 
   

3. Utilisez-

   <i class="material-icons">visibility</i>