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\';)

Answer 1

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

Answer 2

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 3

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 4

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 5

Just Add the following to your index.html:

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

Answer 6

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