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


93

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:

attendu

Mais je comprends ceci:

réel

Vous avez une suggestion?


La police est peut-être manquante. ou il est chargé plus tard.
Basavaraj Bhusani

@BasavarajBhusani comment puis-je vérifier cela?

après avoir exécuté les solutions ci-dessous, vous devez vider le cache du navigateur. cela a fonctionné pour moi.
Aditya Yada

Réponses:


183

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


10
Cette réponse a fonctionné pour moi, mais j'ai également pu ajouter cette ligne au styles.css et cela a fonctionné. @import 'https://fonts.googleapis.com/icon?family=Material+Icons';
J.Chaney

17
Vous pouvez également ajouter: @import "~material-icons/iconfont/material-icons.css";à votre styles.css
Pooshon Banerjee

5
@PooshonBanerjee material-icons est un projet distinct non géré par l'équipe Angular Material.
Vedran

38

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"
    ]
    

1
C'est la bonne façon angulaire de le faire!
Flétrissement le

1
... et la bonne façon de le faire lors de l'utilisation d'Angular for Apps (comme avec Cordova)
CularBytes

Cela fonctionne pour moi. Au lieu d'utiliser google api, j'installe la conception matérielle.
Max

25

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';
}

Face au problème lorsque l'icône n'était pas rendue et que le texte de fermeture était affiché. Ajout de l'importation ci-dessus dans mon fichier scss et il a commencé à afficher l'icône «X». Merci :)
vinsinraw

J'ai le projet angular 9 et après l'importation du fichier de police d'icône de matériau dans .scss, toujours le même problème, l'icône de matériau n'est pas visible, il affiche le test 'visibilité_off' dans le fichier .apk créé à l'aide de cordova. mais la même chose fonctionne bien dans localhost: 4200 Donc, il y a une autre solution?
Jignesh Gothadiya

11

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

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

11

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;
}

5

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">


2

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.


2

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';

                    }

Merci! Cela fait des heures que je suis coincé!
Håvard Brynjulfsen

1

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


1

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

Par exemple : Material Icon fournit filter_alt pour

entrez la description de l'image ici

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

mais ça se voit 😟

entrez la description de l'image ici

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>

0

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>


-2
**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';
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.