'Angular: Google Material Icons not rendering

In Angular project Google material icons are working fine in chrome but not rendering in chrome incognito mode and firefox . In index.html below lines are used for getting fonts library.

  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

In template:

<mat-icon>person</mat-icon>

Instead of icon it show person as text. In browser's network tab it shows 307 Temporary Redirect as status code for two request.

Below is output in browser:
enter image description here

cssangulartypescriptangular-materialgoogle-material-icons


Solution 1:[1]

you'd have to use:

<i class="material-icons">3d_rotation</i>
<i class="material-icons">person</i>

Solution 2:[2]

Use as :

<mat-icon svgIcon="person" aria-hidden="false"></mat-icon>
<mat-icon svgIcon="password" aria-hidden="false"></mat-icon>

Reference : https://material.angular.io/components/icon/overview

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Akber Iqbal
Solution 2 Amar Bisht

Related Questions