Comment utiliser les icônes Material Design dans Angular 4 ?

Question

Je veux utiliser les icônes de https://materialdesignicons.com/ dans mon projet angulaire 4. Les instructions sur le site web ne couvrent que la manière de l'inclure dans Angular 1.x ( https://materialdesignicons.com/getting-started )

Comment puis-je inclure les icônes de Material design afin de pouvoir les utiliser comme <md-icon svgIcon="source"></md-icon> en utilisant Angular Material y ng serve ?

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

Answer 1

Pour ceux qui préfèrent utiliser SCSS :

Installer la police

$> npm install material-design-icons

à l'importation src/styles.scss

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

et l'utiliser en HTML comme décrit aquí

<!-- write the desired icon as text-node -->
<i class="material-icons">visibility</i>

Afin de se référer à Sam Claus commentaire, merci pour cela, j'ai ajouté l'installation et l'utilisation des icônes de design de Templarian. Elle est similaire à celle ci-dessus.

Installer la police par le biais du gestionnaire de paquets

$> npm install @mdi/font

importer la feuille de style dans src/styles.scss ou en angular.json comme décrit dans le commentaire de A. Morel aquí

@import '~@mdi/font/css/materialdesignicons.css';

ou en utilisant le URL DU CDN dans index.html ou ailleurs et l'utiliser en HTML comme décrit aquí

<!-- use the symbol name as a class instead of a text-node -->
<span class="mdi mdi-home"></span>

Addendum : Ma réponse est un peu plus ancienne. Elle fonctionne toujours bien mais n'est plus à la pointe de la technologie. La réponse de A. Morel aquí est un peu plus contemporain.

Answer 2

Des instructions sur la manière d'inclure des icônes Material Design dans votre application Angular Material sont désormais disponibles sur le site Web de la Commission européenne. Icônes Material Design - Angular page de documentation.

TL;DR : Vous pouvez maintenant tirer parti de la @mdi/angular-material Paquet NPM qui comprend les icônes MDI distribuées sous la forme d'un seul fichier SVG ( mdi.svg ):

npm install @mdi/angular-material

Ce fichier SVG peut ensuite être inclus dans votre application en l'incluant dans le dossier de votre projet. assets dans la propriété de configuration angular.json :

{
  // ...
  "architect": {
    "build": {
      "options": {
        "assets": [
          { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
          { "glob": "favicon.ico", "input": "./", "output": "./" },
          { "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
        ]
      }
    }
  }
  // ...
}

Le module principal de votre application aura également besoin des importations nécessaires ( HttpClientModule de @angular/common/http utilisé pour charger les icônes et MatIconModule de @angular/material/icon ) à déclarer, ainsi que l'ajout du jeu d'icônes dans le registre :

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';

@NgModule({
  imports: [
    // ...
    HttpClientModule,
    MatIconModule
  ]
})
export class AppModule {
  constructor(iconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(
      domSanitizer.bypassSecurityResourceHtml('./assets/mdi.svg')
    );
  }
}

A Démonstration de StackBlitz est également disponible dès maintenant.

Les étapes pour les anciennes versions d'Angular sont mentionnées ci-dessous :

---

Il suffit de suivre les étapes suivantes :

1. Télécharger mdi.svg de aquí en vertu de la Matériau angulaire et le placer dans votre assets qui doit être situé à (à partir de la racine de votre projet) /src/assets :

   

2. Dans le module de votre application (alias app.module.ts ), 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. Veillez à inclure assets sous le dossier .angular-cli.json en assets (Bien que par défaut, il sera là) :

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

4. Enfin, utilisez-le via le MatIcon avec le composant svgIcon l'entrée :

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

Answer 3

Installer le paquet npm

npm install material-design-icons --save
npm install --save @angular/material @angular/cdk

Ajouter material icons css à votre .angular-cli.json (n'oubliez pas de redémarrer "ng serve")

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

ou dans votre src/styles.scss

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

Importez le module dans votre app.module.ts

import { MatIconModule } from '@angular/material/icon';

...

@NgModule({
  imports: [
      ...,
      MatIconModule
  ],

Et l'utiliser comme ça :

<mat-icon>location_off</mat-icon>

Choisissez le nom à partir de Material Design Icons => https://material.io/tools/icons/?style=baseline

Answer 4

Comme pour la réponse de @creep3007, vous pouvez spécifier la feuille de style dans votre fichier d'installation. .angular-cli.json :

1. Installer le paquet npm

   npm install material-design-icons --save

2. Ajouter les icônes matérielles à votre fichier .angular-cli.json

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

3. Utilisez-le

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

Answer 5

Note cette réponse s'applique au Icônes de conception matérielle par Templarian et NON les icônes du même nom de Google. Je ne comprends pas pourquoi ces instructions ne sont pas dans le Readme, mais voilà.

Tout d'abord, installez le paquet :

npm install @mdi/font --save

Ensuite, il est nécessaire d'ajouter la feuille de style à votre styles.scss fichier. J'ai ajouté ce qui suit à la fin de mon fichier :

//---------------------------------------------------------------------------
// Material Design Icons (https://materialdesignicons.com/)
//---------------------------------------------------------------------------
$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

Note le site $mdi-font-path est nécessaire pour remplacer une valeur par défaut définie dans le cadre de l'application @mdi/font/scss/_variables.scss ce qui provoque une plainte du compilateur webpack. Si vous oubliez de le faire, vous obtiendrez une série d'erreurs, comme suit :

ERREUR dans ./node_modules/css-loader !./node_modules/postcss-loader/lib??ref--3-2 !./node_modules/sass-loader/lib/loader.js !./src/styles.scss Module non trouvé : Erreur : Can't resolve ../fonts/materialdesignicons-webfont.eot' dans dans '/home/myRepo/myApp'.

Modifier : Je ne suis pas sûr que ce soit nécessaire (ça l'est probablement dans certains cas), mais j'ai également mis à jour le fichier .angular-cli.json fichier styles élément :

"styles": [
        "../node_modules/@mdi/icon/font/css/materialdesignicons.min.css",

---

Une autre alternative à ce qui précède, qui a permis de faire fonctionner les icônes avec très peu d'efforts, a été d'importer directement le CSS. Dans le fichier typescript, j'ai remplacé la balise styleUrls (pour éviter un bug étrange avec Karma) :

 // styleUrls: ['./graphics-control.component.css'],
  styles: [require('./my.component.css'),
           require('../pathTo/node_modules/@mdi/font/css/materialdesignicons.min.css')]