web-dev-qa-db-fra.com

L'icône de matériau ne s'affiche pas correctement

L'icône Matériau ne s'affiche pas correctement dans mon projet, je l'ai installée correctement mais ne s'affiche pas dans le navigateur.

j'ai suivi les étapes ci-dessous:

npm install material-design-icons

.angular-cli.json 

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

app.module.ts 

import {MatSidenavModule, MatToolbarModule, MatIconModule} from '@angular/material';

app.component.html 

<mat-toolbar-row>
    <span>Second Line</span>
    <span class="example-spacer"></span>
    <mat-icon class="example-icon">verified_user</mat-icon>
  </mat-toolbar-row>
angularmaterialgoogle-material-icons
13
dhana

J'ai eu le même problème. Causé parce que j'importais le thème matériel avant les polices de mon theme.scss.

Devrait être:

@import url( 'https://fonts.googleapis.com/css?family=Roboto:400,700|Material+Icons');

@import '~@angular/material/theming';
18
Chris Fremgen

J'ai eu le même problème, car j'ai oublié d'ajouter le module sur NgModule.imports:

@NgModule({
  imports: [
    MatIconModule
  ]
})
2
Dung-Tri LE

pensez à utiliser Google CDN à la place en ajoutant ce qui suit à votre index.html:

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

Modifier:

déplacez/téléchargez le fichier CSS et placez-le dans votre dossier assets, puis dans votre angular-cli.json, vous ajoutez les éléments suivants à votre tableau de styles:

"../src/assets/material-icons.css"
1
Hamed Baatour

J'avais créé ma propre police de texte !important

a dû rendre les icônes plus importantes:

.lato * {
  font-family: 'Lato' !important;
}

.mat-icon{
  font-family: 'Material Icons' !important;
}
0
jenson-button-event

Vérifiez votre console pour des erreurs diverses. 

Si vous rencontrez une erreur diverse dans votre composant, cela pourrait empêcher votre mat-icon de s’initialiser correctement et vous ne verrez que la représentation textuelle du glyphe.

0
Simon_Weaver

Couru dans cela dans angulaire 6, solution a été d'ajouter mat-icon-button,

<button mat-icon-button type="button" 
    (click)="yourMethod()">
    <mat-icon>delete</mat-icon>
</button>

Assurez-vous d’ajouter MatIconModule à vos importations app.module.ts et cela devrait fonctionner comme un charme.

0
Goran Šutić

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

assurez-vous que cela a été ajouté à votre index.html.

0
headmelon