Material Icon Not Rendering Properly

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.

I 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.