CODEWITHSUNDEEP
cssangular-materialiconsicon-fonts
mohammad rostami siahgeli
mohammad rostami siahgeli

Reputation: 7207

How to incorporate an icon that is not in Google Material for Angular?

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?

Upvotes: 1

Views: 3345

Answers (2)

Aras
Aras

Reputation: 1597

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

look at the link.

Upvotes: 0

George Antonakos
George Antonakos

Reputation: 748

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).

Upvotes: 2

Related Questions