Click here to Skip to main content
13,258,055 members (75,003 online)
Click here to Skip to main content
Add your own
alternative version

Stats

2.8K views
3 bookmarked
Posted 5 Nov 2017

SVG Icon for Angular Material Applications using Angular 4 and Above

, 5 Nov 2017
Rate this:
Please Sign up or sign in to vote.
How to use SVG icon into Angular material application having Angular version 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

License

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

Share

About the Author

invingagan
India India
This member doesn't quite have enough reputation to be able to display their biography and homepage.

You may also be interested in...

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.171114.1 | Last Updated 5 Nov 2017
Article Copyright 2017 by invingagan
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid