Angular Material Icons

Updated April 6, 2023

Definition of Angular Material Icons

In angular, we have material library which can be used to developer and design our application fast and using the in build tags for designing purpose. It also provides us mat-icon which is responsible to show the icons for us, it can show and support both types of icon that is fonts, and SVG, but it does not support the bitmap-based format like we have png, jpg, etc. We can use this library into our existing angular application itself just by adding and installing the libraries from the angular CLI by using few commands it makes it easy for us to use. Also, we have to import few packages in order to use the mat-con directive inside our template to show the icons, in the coming section of the tutorial we will see how we can install the required libraries and also, how to implement this to display the icons inside our application for beginners for better understanding and clarity.

Syntax:

As we know we will be going to use the mat-icon directive to show our icons on the UI, we just need to create this tag inside the template, let’s have a closer look at the syntax for better understanding see below;

<mat-icon aria-hidden="false" aria-label="your label">name of your icon</mat-icon>

As you can see in the above example we are trying to show the icon which we have mentioned in the above line, we just need to mentioned the name and it will start working for us.

Let’s take a practice example for this for better understanding and clarity see below;

e.g. :

<mat-icon aria-hidden="false" aria-label="Example home icon">favorite</mat-icon>

It will show the icon named as favorite of the angular icon list. In the coming section, we will look at the full configuration of icon library inside our project for beginners.

How to use icons in Angular material?

As we have already seen few points which enable the icon library inside our application. But in this section first, we will have look at the full configuration that is needed in order to make the angular application work properly us, to make application work we first need to create the angular project after that we will going to install the angular material library inside it by using few commands in the angular CLI. But first, have closer look at the internal working of the material icon in details, so let’s get started;

1) MatIconRegistry: first we have MatIconRegistry which is a registry, and it is an injectable service that helps and supports us to associate icons name and define aliases for CSS. we can associate names with SVG, HTML, etc.

2) By the help of this material icon we can display font icon or SVG icon by using the mat-icon directive of angular material. It is very easy to use, but this directive present inside the MatIconModule which needs to be imported in order to make this work, else it will throw us error.

3) MatIconModule: This module need to be imported into the project or the root module where we want to display the icon, it allows us to use the mat-icon directive to display our icons on the template we have created. This module present inside the ‘@angular/material/icon ‘ package.

Now let’s get started with the steps that need to be taken in order to step up our angular material project initially for beginners see below;

1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli)

The above command will install the CLI globally in our system hence we can use it globally when required.

2) Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your command Prompt and press enter see below;

e.g. :

ng new your project name

>> ng new my-first-project

This command will create the project with the name my-first-project, you can create your project with any name mentioned.

3) Just to make sure try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

4) Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has created without any error or bugs inside it.

e.g. :

ng serve

5) Go on browser and try to run the application with the below URL:

e.g. :

http://localhps:4200

By default, angular project run on port 4200, you can change it as per your need if required.

6) Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example

Make sure your angular project properly configured using previous steps let get started;

icon-demo.omponent.ts:

import {Component} from '@angular/core';
/**
* @title different icons
*/
@Component({
selector: 'icon-demo',
templateUrl: 'icon-demo.html',
})
export class IconDemo {}

Module.ts:

import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material/icon';
@NgModule({
exports: [
MatIconModule
]
})
export class DemoIconModule {}

HTML CODE:

<h5><u><i>Demo for angular material icon !!</i></u></h5>
<mat-icon aria-hidden="false" aria-label="Example home icon">favourite</mat-icon>
<br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">settings</mat-icon>
<br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">favorite</mat-icon>
<br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">done</mat-icon>
<br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">info</mat-icon>
<br/>
<mat-icon aria-hidden="false" aria-label="Example home icon">thumb_up</mat-icon>

index.html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons&display=block" rel="stylesheet">
<title>Demo for material icon!!</title>
</head>
<body class="mat-app-background">
<icon-demo>Loading..</icon-demo>
<span class="version-info">Current build: 12.0.4</span>
</body>
</html>

Output:

Conclusion

By the use of this, we can simply and easily start developing our application helps in designing also. Just by simply adding the library and module to the root module we can start using it directly to our application, which is handy for the developer as well.

Recommended Articles

This is a guide to Angular Material Icons. Here we discuss the Definition, syntax, How to use icons in Angular material? with Examples with code implementation. You may also have a look at the following articles to learn more –

1. Angular CLI
2. Angular 7 Form Validations
3. Angular 7 Features
4. AngularJS ng-if