Les icônes de matériau angulaire ne fonctionnent pas

J'ai installé Material for angular,

J'ai importé sur mon module d'application MatIconModule (avec import { MatIconModule } from '@angular/material/icon';)

Je l'ai ajouté sous mes importations ngmodule avec:

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

J'ai importé toutes les feuilles de style

Et je l'ai également importé dans mon composant d'application qui (essaie de) les utiliser (avec une autre import {MatIconModule} from '@angular/material/icon';ligne au début).

Mais les icônes matérielles n'apparaissent toujours pas.

Par exemple, avec cette ligne:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

J'attends quelque chose comme ça:

Mais je comprends ceci:

Vous avez une suggestion?

Ajoutez une feuille de style CSS pour les icônes de matériaux!

Ajoutez ce qui suit à votre index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Reportez-vous - https://github.com/angular/material2/issues/7948

Pour Angular 6+:

1. npm installez ceci: npm install material-design-icons

2. ajoutez les styles à angular.json:

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

Si vous utilisez SASS, il vous suffit d'ajouter cette ligne à votre .scssfichier principal :

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Si vous préférez éviter de récupérer des icônes de Google, vous pouvez également héberger les icônes comme décrit dans le Guide des icônes de matériaux :

Pour ceux qui cherchent à héberger eux-mêmes la police Web, une configuration supplémentaire est nécessaire. Hébergez la police d'icône dans un emplacement, par exemple https://example.com/material-icons.woff et ajoutez la règle CSS suivante:

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

De plus, les règles CSS pour le rendu de l'icône devront être déclarées pour rendre la police correctement. Ces règles font normalement partie de la feuille de style de Google Web Font, mais devront être incluses manuellement dans vos projets lors de l'auto-hébergement de la police:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Vous devez importer MatIconModule et utiliser l'url suivante dans index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Dans mon cas, il y avait un style appliqué qui remplace la famille de polices. J'ai donc ajouté un style de famille de polices explicitement comme ceci:

.material-icons{
    font-family: 'Material Icons' !important;
}

La solution complète peut être:

La première étape

Vous devez importer MatIconModuledans votre projet, dans mon projet j'importe le composant nécessaire dans un fichier séparé puis je l'importe dans l'AppModule, vous pouvez l'utiliser ou les importer directement:

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Deuxième étape

Chargez la police de l'icône dans votre index.html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Dans mon cas, le nom de l'icône que j'ai écrit n'était associé à aucune icône.

Vous pouvez vérifier les noms corrects ici: https://material.io/tools/icons/?style=baseline

Dans mon cas, les icônes ne sont pas apparues car j'ai foiré mes polices en utilisant! Important. Retirer cela a fait apparaître les icônes.

J'ai rencontré le problème des icônes qui ne s'affichent pas pour moi. J'avais suivi les étapes fournies par Basavaraj Bhusani mais ne fonctionnait toujours pas.

J'ai trouvé que le problème était que dans mon scss, j'avais le text-transform: uppercasequi faisait que l'icône affiche simplement le contenu 'arrow_forward'. J'ai dû modifier text-transform: nonespécifiquement l'icône sur l'icône, sinon elle ne serait pas rendue.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

J'ai réalisé que personne n'avait parlé de l'installation de hammerJs au début avant de l'importer dans votre application. Eh bien, pour les personnes qui ont un problème similaire, vous devez d'abord importer hammerJs, vous pouvez utiliser NPM, Yarn ou google CDN pour l'installation. Cette réponse concerne l'installation avec NPM ou Yarn:

NPM

npm install --save hammerjs

Fil

yarn add hammerjs

Après l'installation, importez-le sur le point d'entrée de votre application (par exemple src / main.ts).

import 'hammerjs';

Si vous préférez utiliser Google CDN, veuillez visiter le matériel Angular pour plus d'explications https://material.angular.io/guide/getting-started

Nom d'icône incorrect : le nom d'une icône matérielle est incorrect

Par exemple : Material Icon fournit filter_alt pour

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

mais ça se voit 😟

Correction: nous devons utiliser filter_list_alt pour l'icône de type d'entonnoir comme

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Si vous avez écrasé un style de matériau angulaire existant ou tout autre style qui affecte d'une manière ou d'une autre l'icône, cela peut provoquer un problème. Déplacez le code de l'icône en dehors de tout style et testez.

Pour moi, c'était une variante de police: petites majuscules;

Je l'ai donc simplement déplacé vers l'élément enfant. Ci-dessous se trouve une partie de la grille de matériau angulaire.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Ajoutez simplement ce qui suit à votre index.html:

link href="https://fonts.googleapis.com/icon?family=Material+Icons"  rel="stylesheet"

**Add following code to your css**

 .material-icons {  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;

    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}