Material icon not rendering properly in my project, i installed properly but even though not showing in browser.
i followed below steps:
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></span> <mat-icon>verified_user</mat-icon> </mat-toolbar-row>7 Answers
I had the same issue. Caused because I was importing the material theme before the fonts in my theme.scss.
Should be:
@import url( ');
@import '~@angular/material/theming';<link href="" rel="stylesheet">
make sure this has been added to your index.html.
0I had made my own text font !important
had to make the icons more important:
.lato * { font-family: 'Lato' !important;
}
.mat-icon{ font-family: 'Material Icons' !important;
}I had the same issue, because I forgot to add the module on NgModule.imports :
@NgModule({ imports: [ MatIconModule ]
})consider using google CDN instead by adding the following to your index.html:
<link href="" rel="stylesheet">Edit:
move/download the CSS file and place it in your assets folder and then in your angular-cli.json you add the following to your styles array:
"../src/assets/material-icons.css"Ran into this in Angular 6, solution ended up being adding mat-icon-button,
<button mat-icon-button type="button" (click)="yourMethod()"> <mat-icon>delete</mat-icon>
</button>Make sure you add MatIconModule to your app.module.ts imports and it should work like a charm.
Check your console for miscellaneous errors.
If you have a miscellaneous error in your component it could be preventing your mat-icon from initializing properly and you'll just see the textual representation of the glyph instead.
