Angular material icons list

Updated April 18, 2023

Introduction to Angular material icons list

Angular material provides us with different modules by which we can easily create components without much code. These components come with the default styling and animations which is provided by the angular material library. We do not have such thing as an icon list, yes but we can definitely present our icon in different ways. Also, we can make use of available material modules which can represent icon lists easily. Also, we will have a list of icons which are available by the martial library in detail, we can simply use them to create the icon on the UI. In the coming section, we will see the configuration to make it work properly with the practice example also for better understanding and clarity of the code.

Syntax:

As we know we can use the different modules to achieve this, so in this section, we will have closer look at the syntax which will help us to create the list of icons using the material library let’s get started to see below;

<mat-list role="list">
<mat-list-item role="listitem">
<mat-icon aria-hidden="false" aria-label="your label">your icon 1</mat-icon>
</mat-list-item>
<mat-list-item role="listitem">
<mat-icon aria-hidden="false" aria-label=" your label "> your icon 2 </mat-icon>
</mat-list-item>
</mat-list>

As you can see in the above syntax we are trying to use ‘mat-list’ which is a module provided by the material library used to create and show our data in the form of list. In the coming section of the tutorial, we will see practice examples to understand this better for beginners.

How to Create an icons list in Angular material?

As of now we already know that to create the icon list we require a list module from the material library, which helps us to represent our component in the form of a list. It is easy to use and import inside the root file. In this section, we will have closer look at the configuration part of the list module, how to use this in order to create the icon list or any other component list in angular material. Let’s get started to see below;

1) MatListModule: This module helps us to create the list of components, here we are trying to create an icon list. It has to be present inside the root module or the any of the files in which we want to sue this. For reference see below code and pate inside the material module TS file;

e.g. :

import {MatListModule} from '@angular/material/list';

2) mat-list: we have ‘mat-list’ it is used as the parent element or the root element, inside we can place our child component to show them as a list in angular material UI for users. Below see the basic syntax for this ;

e.g. :

<mat-list role="list">
// list of items goes here ..//
</mat-list>

It also provides few properties which are mentioned below;

a) disabled: it is used to disabled the component.

3)  mat-list-item: now we have a list item which is used to represent our items in the list, here we can place the icon as the item or the option. see below syntax for better understanding;

e.g. :

<mat-list role="list">
<mat-list-item role="listitem">option 1</mat-list-item>
<mat-list-item role="listitem">option 2</mat-list-item>
</mat-list>

As you can see we are using this selector inside the ‘mat-list’ parent root element only to create our list of icons using the material library.

Now we will have closer look at the steps which are needed to perform in order to create the angular project from scratch with material added to it, follow all the steps to avoid the error. see below;

1) first we will install angular CLI which is very much needed to manage our angular project and helps us to create it very fast by executing a few commands. To install it run the below command;

e.g. :

npm install -g @angular/cli

2) now in the second step we are ready to create the angular project from the scratch. Just by executing the below command, we can create it. Mentioned the project name at the end.

e.g. :

ng new your project name

>> ng new my-first-project

3) install the required dependency it is an option if not required. but later if it gives any error related to dependency run this command;

e.g. :

npm install

4) Once the above commands are successfully executed then you may run the below one to start the server instance;

e.g. :

ng serve

5) to check your application if it runs fine, just types in the below URL on the browser to see the changes you have made; by default, it runs on the port 4200.

e.g. :

http://localhps:4200

6) now we are ready to add the material library to our project. for that, we require only below command this add and create the martial folder inside the node module.

e.g. :

ng add @angular/material

after this we are ready to use the icon list in our application.

Example

Sample example to show icon list in material, also go to forgot to add the icon API else you will not be able to see any icon on the application.

1) Index.html  code :

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

2) demo-icon-list.component.ts code :

import { Component } from '@angular/core';
@Component({
selector: 'icon-list',
templateUrl: './demo-icon-list.component.html',
styleUrls: [ './demo-icon-list.component.css' ]
})
export class AppIocnListComponent  {
name = 'demo icon list';
}

3) demo-icon-list.component.html code :

<h4><u><i>Icon List demo using Angular material !!</i></u></h4>
<mat-list role="list">
<mat-list-item role="listitem"> Icon 1 :
<mat-icon aria-hidden="false" aria-label="">home</mat-icon>
</mat-list-item>
<mat-list-item role="listitem"> Icon 2 :
<mat-icon aria-hidden="false" aria-label="">check_circle_outline</mat-icon>
</mat-list-item>
<mat-list-item role="listitem"> Icon 3 :
<mat-icon aria-hidden="false" aria-label="">star</mat-icon>
</mat-list-item>
<mat-list-item role="listitem"> Icon 4 :
<mat-icon aria-hidden="false" aria-label="">lock_open</mat-icon>
</mat-list-item>
<mat-list-item role="listitem"> Icon 5  :
<mat-icon aria-hidden="false" aria-label="">note_add</mat-icon>
</mat-list-item>
</mat-list>

4) module.ts code :

import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
import {MatListModule} from '@angular/material/list';
@NgModule({
exports: [
MatIconModule,
MatInputModule,
]
})
export class MaterialIconListModule {}

Output :

Conclusion

To create the list we have a list module, which we can use to create a list of items in the material library. This module is easy to use, handle and also maintainable by the developers. Follow the above steps properly and make this work inside your project.

Recommended Articles

This is a guide to Angular material icons list. Here we discuss How to create an icons list in Angular material along with the examples. You may also have a look at the following articles to learn more –

1. Angular Material navbar
2. Angular material search bar
3. AngularJS Date Filter
4. AngularJS ng-disabled