SVG Icon for Angular Material Applications using Angular 4 and Above

Introduction

Angular material and Angular - 4 are great together to make a Single Page Application. They are quite dynamic in nature as there are frequent changes in framework. If you are familiar with angular-material-1 framework, then it was very easy to use material design icons. The following steps will help you to setup and use SVG icons sprites.

Background

It is expected that you have some basic knowledge with Angular material and Angular library using TypeScript.

Code examples will be using Typescript.

Steps to Setup Material Design Icons with Angular Application

1. Create Angular cli Application

ng new svg-icon-ang

2. Install Material and Material Design Icons Library

Go the svg-icon-ang directory to install the material design icons.

npm install --save @angular/material @angular/cdk material-design-icons

It will take some time as it would need to download all the assets and svg files.

You can browse material design icons here.

3. Setup svg Sprites to Application

It is time to include the svg-sprites to your application. It is a bit tricky as svg-sprites are installed into node_modules but the application will server icons from assets directory.

Add svg Sprites to Assets

"assets": [ {
     "glob": "*.svg",
     "input": "../node_modules/material-design-icons/sprites/svg-sprite/",
     "output": "assets/svg-icons"
}]

Note: It will copy all the svg files for assets/svg-icons directory. We will use only action svg file for demo.

Add svg Sprites to Application

Include HttpModule and MatIconModule from @angular/http and @angular/material into imports section on app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MatIconModule } from '@angular/material';
import { HttpModule } from '@angular/http';

@NgModule({

declarations: [
   AppComponent
],

imports: [
   BrowserModule,
   MatIconModule,
   HttpModule
],

providers: [],
bootstrap: [AppComponent]
})
export class AppModule { 

Include svg sprite file to app.component.ts file.

import { Component } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material';

@Component({

    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MatIconRegistry]
})

export class AppComponent {
    title = 'app';
    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
        iconRegistry.addSvgIconSetInNamespace
        ( "action", sanitizer.bypassSecurityTrustResourceUrl("assets/svg-icons/svg-sprite-action.svg"));
    }
}

4. Use of svg Sprite Application

Usage of sprite into view. Name of icon is id field of icon in svg sprite file. It can also be created as "ic_<name of icon with _ as delimiter>_24px"

MatIcon will use svgIcon property to find the icon in svg sprite namespace - app.component.html

Home Icon: <mat-icon svgIcon="action:ic_home_24px"></mat-icon>
3D Rotation Icon: <mat-icon svgIcon="action:ic_3d_rotation_24px"></mat-icon>

Conclusion

You can use your own svg sprite as well as used material design icons. You need to provide the svg sprite file in component and are good to go.

The source code of the above example is also available at github: SVG-ICONS-Ang-4

Important Links

• Angular: https://angular.io
• Angular material: https://material.angular.io
• Mat Icon Overview: https://material.angular.io/components/icon/overview
• Material design icons: https://material.io/icons