Click here to Skip to main content
15,035,685 members
Articles / Web Development / HTML5
Posted 5 Nov 2017


3 bookmarked

SVG Icon for Angular Material Applications using Angular 4 and Above

Rate me:
Please Sign up or sign in to vote.
3.95/5 (7 votes)
5 Nov 2017CPOL2 min read
How to use SVG icon into Angular material application having Angular version 4 and above


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.


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


declarations: [

imports: [

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


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

export class AppComponent {
    title = 'app';
    constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
        ( "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>


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

India India
No Biography provided

Comments and Discussions

-- There are no messages in this forum --