Open In App

Angular Material Icons

Improve
Improve
Like Article
Like
Save
Share
Report

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:

Project Structure

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

  • app.component.html

HTML




<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material Icons</h3>
    <mat-icon>
        book
    </mat-icon>
        <span>Book Icon</span><br>
    <mat-icon>
        backup
    </mat-icon>
        <span>Backup Icon</span><br>
    <mat-icon>
        calendar_today
    </mat-icon>
        <span>Calender Icon</span><br>
    <mat-icon>
        card_giftcard
    </mat-icon>
        <span>Giftcard Icon</span><br>
    <mat-icon>
        copyright
    </mat-icon>
        <span>Copyright Icon</span><br>
    <mat-icon>
        done
    </mat-icon>
        <span>Done Icon</span><br>
    <mat-icon>
        extension
    </mat-icon>
        <span>Extension Icon</span><br>
    <mat-icon>
        favorite
    </mat-icon>
        <span>Favorite Icon</span><br>
    <mat-icon>
        g_translate
    </mat-icon><span>Google Translate Icon</span><br>
    <mat-icon>
        history
    </mat-icon>
        <span>History Icon</span><br>
</div>


  • app.component.ts

Javascript




import { Component } from '@angular/core';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
 
}


  • app.module.ts

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatIconModule,
        HttpClientModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }


  • styles.css:

CSS




/* Add application styles & imports to this file!
@import '@angular/material/prebuilt-themes/deeppurple-amber.css';
body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 30px;
} */
 
 
/* Add application styles & imports to this file! */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
/* @import "font.css"; */
 
body {
  font-family: Roboto,Helvetica Neue Light,Helvetica Neue,
               Helvetica,Arial,Lucida Grande,sans-serif;
}
 
[class^="icon-"], [class*=" icon-"] {
  font-family: 'brands' !important;
}
.icon-angular:before {
  content: "\e900";
  color: #dd0031;
}
.icon-facebook:before {
  content: "\e901";
  color: #3b5998;
}
.icon-google:before {
  content: "\e902";
  color: #4285f4;
}
.icon-microsoft:before {
  content: "\e903";
  color: #666;
}


Output:

Angular Material Icons

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

  • app.component.html

HTML




<div>
    <h1>GeeksforGeeks</h1>
    <h3>Angular Material SVG Icons</h3>
    <mat-icon svgIcon="cloud"></mat-icon>
        <span>   Cloud Icon</span><br>
    <mat-icon svgIcon="user"></mat-icon>
        <span>   User Icon</span><br>
    <mat-icon svgIcon="folder"></mat-icon>
        <span>   Folder Icon</span>
        <br><br><br><br><br>
</div>


  • app.component.ts

Javascript




import { Component } from '@angular/core';
import { DomSanitizer } from "@angular/platform-browser";
import { MatIconRegistry } from "@angular/material/icon";
 
const cloudIcon =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z"/></svg>`;
const userIcon =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0S96 57.3 96 128s57.3 128 128 128zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`;
const folderIcon =
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
<path d="M64 480H448c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64H298.5c-17 0-33.3-6.7-45.3-18.7L226.7 50.7c-12-12-28.3-18.7-45.3-18.7H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64z"/></svg>`;
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
        iconRegistry.addSvgIconLiteral(
            "cloud",
            sanitizer.bypassSecurityTrustHtml(cloudIcon)
        );
        iconRegistry.addSvgIconLiteral(
            "user",
            sanitizer.bypassSecurityTrustHtml(userIcon)
        );
        iconRegistry.addSvgIconLiteral(
            "folder",
            sanitizer.bypassSecurityTrustHtml(folderIcon)
        );
    }
}


  • app.module.ts

Javascript




import { NgModule } from '@angular/core';
import { BrowserModule }
    from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { MatIconModule } from '@angular/material/icon';
import { HttpClientModule } from '@angular/common/http';
 
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        MatIconModule,
        HttpClientModule,
        BrowserAnimationsModule,
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }


Output :

Angular Material SVG Icon

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



Last Updated : 07 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads