CODEWITHSUNDEEP
cssangulartypescriptangular-materialgoogle-material-icons
ranjeet8082
ranjeet8082

Reputation: 2359

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

Upvotes: 1

Views: 1460

Answers (2)

Amar Bisht
Amar Bisht

Reputation: 137

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

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15041

you'd have to use:

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

Upvotes: 3

Related Questions