Angular Material icons not working

I've installed Material for angular,

I've imported on my app module MatIconModule (with import { MatIconModule } from '@angular/material/icon';)

I've added it under my ngmodule imports with:

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

I've imported all stylesheets

And I've also imported it in my app component that is actually (trying to) using them (with another import {MatIconModule} from '@angular/material/icon'; line at the beginning of it).

But material icons still not appear.

For example, with this line:

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

I'm expecting something like this:

But i get this:

Got any suggestion?

Add CSS stylesheet for Material Icons!

Add the following to your index.html:

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

Refer - https://github.com/angular/material2/issues/7948

For Angular 6+:

1. npm install this: npm install material-design-icons

2. add the styles to angular.json:

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

If using SASS you only need to add this line to your main .scss file:

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

If you prefer to avoid fetching icons from google you can also self-host the icons as described in Material Icons Guide:

For those looking to self host the web font, some additional setup is necessary. Host the icon font in a location, for example https://example.com/material-icons.woff and add the following CSS rule:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

In my case, there was a style applied that overrides font family. So, I added font family style explicitly like this:

.material-icons{
    font-family: 'Material Icons' !important;
}

You must import MatIconModule and use the following url in index.html

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