What are mat Icons in Angular?

Mat-Icon List is a feature in the Angular Material library that provides a list of available material design icons to use in your Angular app. These icons are easily recognizable and can be used to enhance the user interface of your app by adding visual cues and context to various elements.

Adding Mat-Icon List to your Angular project

To use Mat-Icon List in your Angular project, you’ll need to first install the Angular Material library. You can do this by running the following command in your terminal:

npm install --save @angular/material @angular/cdk

Next, you’ll need to include the Angular Material icons in your app by adding the following line to your index.html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

You’ll also need to import the Angular Material modules that you plan to use in your app. For example, if you want to use Mat-Icon List, you’ll need to import the MatIconModule in your app’s root module:

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

@NgModule({
  imports: [
    MatIconModule,
    // other imports
  ],
  // other module metadata
})
export class AppModule {}

Using Mat-Icon List in your templates

Once you have the Angular Material library installed and configured in your app, you can use Mat-Icon List in your templates by using the mat-icon component. Simply include the mat-icon element in your template and specify the icon you want to use as the value of the svgIcon input.

For example, to use the “favorite” icon, you would do the following:

<mat-icon svgIcon="favorite"></mat-icon>

You can also use the fontSet and fontIcon inputs to specify a different font set and icon name. For example:

<mat-icon fontSet="fa" fontIcon="fa-star"></mat-icon>

Mat-Icon List provides a large selection of icons to choose from, and you can find the full list here.

Customizing the appearance of Mat-Icon List icons

You can customize the appearance of your Mat-Icon List icons by using the various inputs and CSS styles available to the mat-icon component. For example, you can change the color of your icons by using the color input:

<mat-icon svgIcon="favorite" color="primary"></mat-icon>

You can also use CSS to style your icons. For example, to make your icons larger, you could do the following:

mat-icon {
  font-size: 36px;
}