Angular Material icons not working

Question

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?

Answer 1

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

Answer 2

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"
   ]
   

Answer 3

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';
}

Answer 4

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;
}

Answer 5

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

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

Answer 6

The full solution can be :

Step one

You have to import MatIconModule in your project, in my project I import the necessary component in a separate file then I import it in the AppModule, you can use this or import them directly :

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

Step two

Load the icon font in your index.html :

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

Answer 7

In my case the icons did not show up because I has screwed up my fonts by using !important. Taking that out caused the icons to appear.

Answer 8

In my case, the icon name I wrote wasn't associated to any icon.

You can check the correct names here: https://material.io/tools/icons/?style=baseline

Answer 9

You can import Material icons in two ways. one is to import the icon in the main index.html page in your project.

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

The other way is to import Material icons to the main CSS file as following you can see.

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

My opinion is to add it to CSS file.

Answer 10

I ran into the issue of icons not displaying for me. I had followed the steps provided by Basavaraj Bhusani however still not working.

I found the issue was that in my scss, I had the text-transform: uppercase which was causing the icon to just display the content 'arrow_forward'. I had to change the text-transform: none on the icon specifically otherwise it would not render.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

Answer 11

I realized no one spoke about installing hammerJs at first before importing it to your app. Well for people who have a similar issue you need to import hammerJs at first, you can use either NPM, Yarn or google CDN for the installation. This answer is for installation with either NPM or Yarn:

NPM

npm install --save hammerjs

Yarn

yarn add hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

If you prefer to use Google CDN kindly visit the Angular material for more explanation https://material.angular.io/guide/getting-started

Answer 12

Wrong Icon Name : Some Material Icon name is wrong.

For example : Material Icon provides filter_alt for

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

but it shows up 😟

Fix : we have to use filter_list_alt for funnel type icon as

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

Answer 13

If you have overwritten some existing Angular Material styling or any other styling that somehow affects the icon, it may cause an issue. Move the icon code outside of any styling and test.

For me it was font-variant: small-caps;

So I just moved it to the child element. Below is part of Angular Material grid.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

Answer 14

First, please consider that you need to insert style into the project:

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

If it did not solve the problem, I guess it's because you are using another font and also added !important for the font, please try to add the code below in your style.css (or style.scss) which is the general/public CSS file which effects on your whole project:

md-icon{
  font-family: 'Material Icons' !important;
}

refer to this answer: https://github.com/angular/components/issues/5863#issuecomment-316307387

Answer 15

Just Add the following to your index.html:

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

Answer 16

**Add following code to your css**

 .material-icons {  
    /* 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';
}