web-dev-qa-db-fra.com

Comment utiliser les icônes de conception de matériau dans Angular 4?

Je souhaite utiliser les icônes de https://materialdesignicons.com/ dans mon projet angular 4. Les instructions sur le site Web expliquent seulement comment l'inclure dans Angular 1.x ( https://materialdesignicons.com/getting-started )

Comment puis-je inclure les icônes de conception Matériau pour pouvoir 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!

angularangular-material2
35
Matthias Herrmann

Suivez simplement ces étapes:

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

    Documentation<code>assets</code> folder

  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. Assurez-vous d'inclure le dossier assets sous .angular-cli.json dans assets (bien que ce soit par défaut, il sera là):

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

  4. Enfin, utilisez-le via le 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 fonctionne pour les versions ultérieures.

28
Edric

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 ici

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

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

52
creep3007

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

  1. Installer le paquet npm

    npm install material-design-icons --save

  2. Ajoutez des icônes de matière à votre .angular-cli.json

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

  3. Utilise le

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

Installer le paquet npm

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

Ajoutez des icônes matérielles css à votre fichier .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';

Module d'importation dans votre app.module.ts

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

...

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

Et utilisez-le comme ça:

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

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

9
A. Morel

Remarque cette réponse s'applique à icônes de conception de matériaux par Templarian et NON aux icônes du même nom par Google. Je ne comprends pas pourquoi ces instructions ne figurent pas dans le fichier Lisez-moi, mais le tour est joué.

Tout d'abord, installez le paquet:

npm install @mdi/font --save

Ensuite, il est nécessaire d’ajouter la feuille de style à votre fichier styles.scss. 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";

Remarque le $mdi-font-path est nécessaire pour remplacer un jeu par défaut défini dans le @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! introuvable: Erreur: Impossible de résoudre '../fonts/materialdesignicons-webfont.eot' dans '/ home/myRepo/myApp'

Edit : Je ne sais pas si cela est nécessaire (c'est probablement le cas dans certains cas), mais j'ai également mis à jour le fichier .angular-cli.json. styles element:

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

Une autre alternative à ce qui précède, qui a permis aux icônes de fonctionner avec très peu d’effort, a été d’importer le CSS directement. Dans le fichier TypeScript, j'ai remplacé l'élément 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')]
4
theMayer

Avec Bootstrap 4 & Angular, cela fonctionne:

1) Run:

npm install material-design-icons --save

2) Ajouter à styles.css ou styles.scss

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

3) Allez à: ..\node_modules\material-design-icons\iconfont\material-icons.css et assurez-vous que la section est exactement comme ceci ('MaterialIcons-Regular.woff2') .. .:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('MaterialIcons-Regular.woff2') format('woff2'),
       url('MaterialIcons-Regular.woff') format('woff'),
       url('MaterialIcons-Regular.ttf') format('truetype');
}

4) Utiliser l'icône en HTML:

<i class="material-icons">visibility</i>
2
Evgeny Lukiyanov

Basé sur @ theMayer answer, il existe ma version pour le faire fonctionner pour le package @mdi/font.

1- npm install @mdi/font --save

2- Dans angular.json, sous architect/buid/options/styles, ajoutez "node_modules/@mdi/font/css/materialdesignicons.min.css"

3- Dans src\app\app.module.ts ajoutez import { MatIconModule } from '@angular/material/icon'; et ajoutez MatIconModule dans la section imports

4- Dans src\styles.scss ajoutez:

$mdi-font-path: "~@mdi/font/fonts";
@import "~@mdi/font/scss/materialdesignicons.scss";

5- Ajoutez l'icône dans votre code HTML à l'aide de mat-icon, par exemple:

<mat-icon class="mdi mdi-dumbbell" aria-hidden="true"></mat-icon>
0
Michael