Angular Material library has a wide variety of components that we can use. One such component is <mat-icon>. The <mat-icon> component makes using vector-based icons in your angular app easier.
To use Material icons in Angular, use the <mat-icon> component. The <mat-icon> directive supports icon fonts and SVG icons but not bitmap-based formats. Icons are necessary when building modern-day web apps, and sometimes they can be frustrating.
Here is the step-by-step guide to implement Material Icons in Angular.
Step 1: Install and configure Angular Material.
Type the following command.
ng new angicon
Go to the project and install the hammerjs.
npm install --save hammerjs
Install Angular Material and Angular Animations using the following command.
npm install --save @angular/material @angular/animations @angular/cdk
Include hammerjs inside the angular.json file. You can find an angular.json file at the root of the project.
"scripts": [ "./node_modules/hammerjs/hammer.min.js" ]
Import a pre-built theme and Material icons.
To import the theme, you can add the following code to your global styles.css file. The file is inside the src folder.
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
Import the BrowserAnimationsModule inside the app.module.ts file.
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Step 2: Import MatIconModule module
We need to import the MatIconModule inside the app.module.ts file.
// app.module.ts import { MatIconModule } from '@angular/material/icon'; @NgModule({ declarations: [ AppComponent, ... ], imports: [ ... MatIconModule ], bootstrap: [AppComponent] }) export class AppModule {}
We can use the built-in material icons with the <mat-icon> component. For example, modify the app.component.html file like below.
<div style="text-align:center"> <h1> Welcome to Angular Material App <mat-icon>mood</mat-icon> </h1> </div>
Go to the terminal and start the angular development server.
ng serve --open
We have successfully integrated the Angular Material Icon inside the Angular demo application.
Registering icons
MatIconRegistry is an injectable service that allows us to associate icon names with the SVG URLs, HTML strings and to define aliases for CSS font classes.
Service to register and display icons used by the <mat-icon> component.
- Registers icon URLs by namespace and name.
- Registers icon set URLs by namespace.
- Register aliases for CSS classes for use with icon fonts.
- Loads icons from URLs and extracts individual icons from icon sets.
SVG icons
When the <mat-icon> component displays an SVG icon, it directly inlines SVG content into the page as the child of an element rather than using the tag or a div background image.
How to use custom SVG icons in Angular
We can also use the custom SVG icons inside our app. For example, I have downloaded one SVG icon for an airplane. Let us use that icon inside our Angular Material tutorial.
Copy that icon inside the src >> assets folder. To use our custom airplane icon with the <mat-icon> component tag, we must add the HttpClientModule inside the app.module.ts file. That is why import the module inside the app.module.ts file.
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { MatIconModule } from '@angular/material/icon'; import { HttpClientModule } from '@angular/common/http'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, BrowserAnimationsModule, MatIconModule, HttpClientModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
Import DomSanitizer and inject it into your component. So, our final code will look like this inside the app.component.ts file.
// app.component.ts import { Component } from '@angular/core'; import { MatIconRegistry } from '@angular/material/icon'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'angicon'; constructor( private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) { this.matIconRegistry.addSvgIcon( 'airplane', this.domSanitizer.bypassSecurityTrustResourceUrl('../assets/airplane.svg') ); } }
Here we have successfully registered the custom SVG icon inside our Angular app. The last step is to use the airplane.svg icon inside the app.component.html file.
<!-- app.component.html --> <div style="text-align:center"> <h1> <mat-icon svgIcon="airplane"></mat-icon> <mat-icon svgIcon="airplane"></mat-icon> <mat-icon svgIcon="airplane"></mat-icon> <mat-icon svgIcon="airplane"></mat-icon> <mat-icon svgIcon="airplane"></mat-icon> </h1> </div>
Save the file and go to http://localhost:4200/, where five SVG icons will be displayed. So that is how you can import the custom svg icons inside an angular example.
That’s it! Check out the Github code.
Ajay Chandan
What if I wanna change the URL conditionally. I don’t get an example of that
Case: in the constructor, I have registered with a URL and on every click, I would like to change it.