Angular Material Icons

Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By using this library, we can significantly increase an end-users user experience, thereby gaining popularity for our application. This library contains modern ready-to-use elements which can be directly used with minimum or no extra code. In this article, we will see the Angular Material Icons.

The Icon Component in angular material is used for displaying vector-based icons in our application. For using Icons we use the <mat-icon> directive. <mat-icon> directive supports both font icons and SVG icons. To register the icon MatIconRegistry is provided by angular. To use the SVG icon, the <mat-icon> element uses the svgIcon attribute.

Syntax:

<mat-icon>name of the icon</mat-icon>
<mat-icon svgIcon=name_of_the_icon>
 name of the icon
</mat-icon>

Installation Syntax: The basic pre-requisite is that we must have Angular CLI installed on the system in order to add and configure the Angular material library. The following command is executed on the Angular CLI to install the angular material library:

ng add @angular/material

Make sure the path should be opened in the terminal before executing the above command.

Please refer to the Adding Angular Material Component to Angular Application article for the detailed installation procedure.

Adding Icon Component:

To use the Icon Component, we need to import the below modules into the app.module.ts file:

import { MatIconModule } from '@angular/material/icon'; 

Also to load SVG icon files using HTTP URL, we also need to import HttpClientModule in the app.module.ts file.

import { HttpClientModule } from '@angular/common/http'; 

To use the Icon component in our code we have to import MatIconModule into the imports array and to use the SVG icon in our code we have to import HttpClientModule into the imports array.

Project Structure: After successful installation, the project structure will look like the following image:

Example 1: The below example illustrates the implementation of the Angular Material Icons

• app.component.html

• app.component.ts

• app.module.ts

• styles.css:

Output:

Example 2: The below example illustrates the implementation of the Angular Material SVG Icon.

• app.component.html

• app.component.ts

• app.module.ts

Output :

Reference:  https://material.angular.dev/components/icon/overview