1

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

Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
ranjeet8082
  • 2,269
  • 1
  • 18
  • 25

2 Answers2

3

you'd have to use:

<i class="material-icons">3d_rotation</i>
<i class="material-icons">person</i>
Akber Iqbal
  • 14,487
  • 12
  • 48
  • 70
  • I tried it is working fine in chrome. But in chrome incognito mode and firefox same issue (307 Temporary Redirect) is coming. – ranjeet8082 Aug 06 '19 at 12:27
0

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

Amar Bisht
  • 137
  • 6