AppDividend
Latest Code Tutorials

Angular Material Icon Tutorial With Example

0 708

Get real time updates directly on you device, subscribe now.

Angular Material Icon Tutorial With 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. In this Angular Material Icon 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.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Angular Material Icon Tutorial With Example

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. So 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 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. Registers 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 a component rather than use the tag or a div background image.

How To Use Custom SVG Icons

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 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, the first one is being 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. 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 Tutorial With 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

Leave A Reply

Your email address will not be published.

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