web-dev-qa-db-fra.com

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

J'ai installé Material pour angular,

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

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

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

J'ai importé tous les stylesheets

Et je l'ai également importé dans le composant de mon application en train de (les essayer) de les utiliser (avec une autre ligne import {MatIconModule} from '@angular/material/icon'; au début de celle-ci).

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:

expected

Mais je reçois ceci:

actual

Vous avez une suggestion?

angularangular-materialangular-material2
37
user9557542

Ajouter une feuille de style CSS pour Material Icons!

Ajoutez ce qui suit à votre index.html:

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

Référez-vous - https://github.com/angular/material2/issues/7948

83
Basavaraj Bhusani

Si vous utilisez SASS, vous devez ajouter cette ligne à votre fichier principal .scss:

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

8
Vedran

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

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

La solution complète peut être:

Première étape

Vous devez importer MatIconModule dans 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 l'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
YCF_L

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

0
Francesco Ambrosini

J'ai réalisé que personne ne parlait d'installer des hammerJs avant de l'importer dans votre application. Pour les personnes confrontées à 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 une installation avec NPM ou Yarn:

MNP

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 document Angular pour plus d'explications https://material.angular.io/guide/getting-started

0
T.M

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

J'ai trouvé que le problème était que dans mon scss, j'avais le text-transform: uppercase qui faisait que l'icône ne faisait qu'afficher le contenu 'arrow_forward'. Je devais changer le text-transform: none sur l'icône spécifiquement, sinon cela ne rendrait pas le rendu.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

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

                    }
0
srunner

Dans mon cas, les icônes ne sont pas apparues car j’ai bousillé mes polices en utilisant! Important. En supprimant cela, les icônes sont apparues.

0
Marc Schluper