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

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 2

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