How can I use the angular material Library and matlcon Components to display a list?

 In the context of DevOps, to display a list of material design icons by using the material Library of Angular and the mat-icon list or Components, you can use the following steps:-

Install Angular Material

Ensure that you have installed the angular material in your Angular project. If not, you can install it by using the command line interface of Angular:

“ng add @angular/material” 

Import required Modules

In your Angular module you would need to import the mat-lcon module:-

Import { MatIconModule } from ‘@angular/material/icon’;

@NgModule({

  Declarations: [

    // Your components

  ],

  Imports: [

    MatIconModule,

    // Other modules

  ],

  // Other configurations

})

Export class AppModule { }

Use mat-lcon Components

Now you would need to use the mat-lcon Components in your HTML file for displaying the material design icons:-

“  favourite”

Create a list of icons

You can use the angular’s ngFor directive for creating the list of icons:-

Export class ExampleComponent {

  Icons = [‘favorite’, ‘home’, ‘star’, ‘account_circle’];

}

Then after, in your Component’s HTML file:-



  {{ icon }}