AppDividend
Latest Code Tutorials

Angular Material Icon Example | How To Use Angular Material Icon

1

Angular Material Icon Example is today’s topic. The Angular Material library has a wide variety of components that we can use. One such component is <mat-icon>. The <mat-icon> component makes it easier to use vector-based icons in your angular app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats.

Angular Material Icon

Icons are the necessary components when we are building modern-day web apps, and sometimes they can be frustrating.

There are some icon sets like Font Awesome and Material Icons have made it more accessible, there is always the icon you need that is still missing.

A good example is a lack of social media icons in the Material Icons for whatever reason.

If we want to avoid this problem, you can use multiple icon sets or a mix between the icon set and your own set of image icons. This introduces the issue of the lack of consistency in your icons.

How to use Material Icons in Angular

 In this tutorial, we will see how we can display the existing material icon provided by the library and also see how we can add our SVG icon to the material app.

There is very wide range of ready-made Material icons that we can use readily. But what if we want to display the custom icons while staying consistent with a Material Design styling? Let’s learn how to use the SVG icons in Angular Material components.

Let us start by installing an Angular project and configure the Material library in Angular.

#Step 1: Install and configure Angular Material

Type the following command. I am using Angular 7 for this demo.

ng new angicon

Angular Material Icon Tutorial With Example

Now, go to the project and install the hammerjs.

npm install --save hammerjs

Now, install Angular Material and Angular Animations using the following command.

npm install --save @angular/material @angular/animations @angular/cdk

Now, include hammerjs inside the angular.json file. You can find an angular.json file on 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");

Now, 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

Okay, now 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. To 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

 

Angular 7 Material Icon Tutorial

So, we have successfully integrated the Angular Material Icon inside the Angular demo application.

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.

  1. Registers icon URLs by namespace and name.
  2. Registers icon set URLs by namespace.
  3. Register aliases for CSS classes, for use with icon fonts.
  4. Loads icons from URLs and extracts individual icons from icon sets.

When the <mat-icon> component displays an SVG icon, it does so by directly inlining an SVG content into the page as the child of an element rather than use 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. I have downloaded one SVG icon for an airplane. Let us use that icon inside our Angular Material tutorial.

Now, copy that icon inside the src >> assets folder.

To use our custom airplane icon with the <mat-icon> component tag, we need to 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 { }

Now, we need to register our custom icon with the MatIconRegistry service provided by Angular Material package.

Import the MatIconRegistry and inject the service into your component. In the component’s constructor method.  

The addSvgIcon registers our icon by taking-in two arguments, and the first one is the icon label, which is of type string. 

The second argument is the relative URL path pointing to the location of the icon. This is a type of SafeResourceUrl.

If we need to parse the URL path string into SafeResourceUrl, we can make use of the DomSanitizer module provided by Angular.

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')
        );
    }
}

So, 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 the http://localhost:4200/ and you can see that five SVG icons will be displayed. So that is how you can import the custom svg icons inside an angular example.

How To Use Custom SVG Icons in Angular

 

Finally, Angular Material Icon Example is over. You can find more about Angular Material Icons here. I have put the code on Github; please check that out as well.

Github Code

Recommended Posts

Angular Material Example

Angular Modal Example 

Angular Material Table Example

Angular 8 CRUD Example

Angular 8 File Upload Example

1 Comment
  1. Ajay Chandan says

    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.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.