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>
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';
J'ai eu le même problème, car j'ai oublié d'ajouter le module sur NgModule.imports:
@NgModule({
imports: [
MatIconModule
]
})
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"
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;
}
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.
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.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
assurez-vous que cela a été ajouté à votre index.html.