How to Use Angular Material Icons with your Angular 8/9

In this article, I show you how to use Angular Material Icons with your Angular project. It is a great advantage using Angular Material with Angular, Angular providing all in one solution by Angular Material to create User Interface(UI) and Angular Material Icons help you to use various kind of icons. This will reduce the work also increase high performance of your Angular project.

The Angular Material Icons providing 1000+ icons for the Web, Android, and iOS with beautifully crafted symbols also it supports all the major web browsers. Now follow the below steps to use the Angular Material Icons properly.

Getting Started with Angular App

Before installing Angular Material first you need to install the Angular App. The best way to create your Angular project using Command Line Interface (CLI), for that here you have an article for installing an Angular app.

Install Angular Material using NPM in your Angular App

Step 1

To setup Angular Material Icons in your Angular project for that first, install Angular Material using the following command.

Now choose a prebuilt theme for your Angular project. If you are using the latest version like 8/9 no problem because it automatically imports the file in your project.

After installed prebuilt theme, now set up HammerJS by using "Y" command, this will install automatically in your node_modules.

Next, you need to set up browser animations for your Angular Material, for that enter "Y" command to complete the step.

Once you completed the above steps you can see all the modules imported automatically in your Angular project. Example: In your app.module.ts you can see the BrowserAnimationsModule imported automatically, Hammer JS imported in main.ts and your theme file imported in angular.json. These are the great advantages of Angular 8 and 9.

Import Angular Material Icons

Step 2

After installing Angular Material in your Angular project now it is time to import MatIconModule in your app.module.ts file. Below you have imported file you just copy and paste it on your app.module.ts.

Step 3

Now open index.html from your App folder and add the Material Icon CDN between your header tag, Here below you have the CDN use this on your index.html.

Step 4

Now you can start to use Angular Material Icons in your Angular project. To use the Material Icons you have to declare <mat-icon>icon_name</mat-icon> in your app.component.html file. (i.e. <mat-icon> star</mat-icon> )

Get here 1000+ Angular Material Icons

Open app.component.html file from the app folder and add the below code.

Once you add the code in your app.component.html file, now run your Angular App with the ng serve command and you get the below result on the browser.

Conclusion:

I hope this article will help you to integrate Angular Material Icons in your project. If you like this article kindly share it with your friends.

1000+ IconsAngular CLIAngular MaterialAngular Material IconsAngular Material UI component