1

To use Material icon for Angular, <mat-icon> is used with the name of the icon:

<mat-icon>check</mat-icon>

And icons can be found here: https://material.io/tools/icons/?style=baseline

Now the problem is this icon-set lacks so many icons. For example, Instagram icon can't be found there.

In these situations one way is to fall back to icon-fonts and include more icon fonts in your HTML page, and use the old <i> element for that purpose.

But that's code smell, because your codebase now has two approaches for one purpose.

How do you solve this problem? How do you incorporate an icon that doesn't exist in Google Material for Angular? How do you extend Google Material icons?

Edric
  • 24,639
  • 13
  • 81
  • 91
mohammad rostami siahgeli
  • 6,787
  • 9
  • 49
  • 89

2 Answers2

2

If you check the API given from Angular Material you could use MatIconRegistry (ref: https://material.angular.io/components/icon/api#MatIconRegistry) to add your own icons to be used by the same notation (using mat-icon).

George Antonakos
  • 698
  • 5
  • 12
0

you can use the google-icon npm package in your own project.

look at the link.

Aras
  • 1,599
  • 15
  • 25