Angular Material SVG Icon

By Arvind Rai, February 07, 2021

Angular provides <mat-icon> element to use vector based icon in our application. The mat-icon directive supports both font icons and SVG icons but not bitmap-based formats (png, jpg, etc.). To use <mat-icon>, we need to import MatIconModule in our application module.

import { MatIconModule } from '@angular/material/icon';

To load SVG file using HTTP URL, we also need to import HttpClientModule.

import { HttpClientModule } from '@angular/common/http';

Angular provides MatIconRegistry to register the icon. To use SVG icon, <mat-icon> element uses svgIcon attribute. To change the icon theme we need to use color attribute.

Technologies Used
MatIconRegistry
Using addSvgIcon
Using addSvgIconLiteral
Using addSvgIconInNamespace
Using addSvgIconLiteralInNamespace
Icon with Color
Icon with <button>
Icon with <a>
Complete Example
Run Application
Reference
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.0.4
3. Node.js 12.5.0
4. NPM 6.9.0

MatIconRegistry

The MatIconRegistry is a service to register and display icons used by <mat-icon> component. It has following methods.
1. addSvgIcon registers an icon by URL in the default namespace.
2. addSvgIconLiteral registers an icon using an HTML string in the default namespace.
3. addSvgIconInNamespace registers an icon using an HTML string in the specified namespace.
4. addSvgIconLiteralInNamespace registers an icon using an HTML string in the specified namespace.
5. addSvgIconSet registers an icon set by URL in the default namespace.
6. addSvgIconSetLiteral registers an icon set using an HTML string in the default namespace.
7. addSvgIconSetInNamespace registers an icon set by URL in the specified namespace.
8. addSvgIconSetLiteralInNamespace registers an icon set using an HTML string in the specified namespace.

Import MatIconRegistry as following.

import { MatIconRegistry } from '@angular/material/icon';

The MatIconRegistry is instantiated as following.

constructor(iconRegistry: MatIconRegistry) { }

Using addSvgIcon

The addSvgIcon method of MatIconRegistry registers an icon by URL in the default namespace.

addSvgIcon(iconName: string, url: SafeResourceUrl, options?: IconOptions)

iconName: Name under which icon is registered.
url: URL of SVG icon. The SafeResourceUrl is a marker interface for a value that is safe to use as a URL to load executable code.
options: Options to change the configuration of icon to present it.

constructor(private iconRegistry: MatIconRegistry, private sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('search_icon', sanitizer.bypassSecurityTrustResourceUrl('http://localhost:4200/assets/search.svg'));
}

Use svgIcon attribute of <mat-icon> element to configure icon name.

<mat-icon svgIcon="search_icon"></mat-icon>

Using addSvgIconLiteral

The addSvgIconLiteral method of MatIconRegistry registers an icon using an HTML string in the default namespace.

addSvgIconLiteral(iconName: string, literal: SafeHtml, options?: IconOptions)

iconName: Name under which icon is registered.
literal: This is the SVG source of icon. The SafeHtml is the marker interface for a value that is safe to use as HTML.

iconRegistry.addSvgIconLiteral('attach_icon', sanitizer.bypassSecurityTrustHtml(ATTACH_ICON));

HTML code:

<mat-icon svgIcon="attach_icon"></mat-icon>

Using addSvgIconInNamespace

The addSvgIconInNamespace method of MatIconRegistry registers an icon using an HTML string in the specified namespace.

addSvgIconInNamespace(namespace: string, iconName: string, url: SafeResourceUrl, options?: IconOptions)

namespace: Namespace in which the icon is registered.
iconName: Name under which icon is registered.
url: URL of SVG icon.

iconRegistry.addSvgIconInNamespace('user', 'video_icon', sanitizer.bypassSecurityTrustResourceUrl('http://localhost:4200/assets/video.svg'));

HTML Code:

<mat-icon svgIcon="user:video_icon" color="primary"></mat-icon>

Using addSvgIconLiteralInNamespace

The addSvgIconLiteralInNamespace method of MatIconRegistry registers an icon using an HTML string in the specified namespace.

addSvgIconLiteralInNamespace(namespace: string, iconName: string, literal: SafeHtml, options?: IconOptions)

namespace: Namespace in which the icon is registered.
iconName: Name under which icon is registered.
literal: This is the SVG source of icon. The SafeHtml is the marker interface for a value that is safe to use as HTML.

iconRegistry.addSvgIconLiteralInNamespace('user', 'menu_icon', sanitizer.bypassSecurityTrustHtml(MENU_ICON));

HTML Code:

<mat-icon svgIcon="user:menu_icon" color="accent"></mat-icon>

Icon with Color

1. By default, Angular Material icon uses currentColor CSS attribute for icon color.

<div style="color:green;">
  <mat-icon svgIcon="attach_icon"></mat-icon>
</div>

The currentColor takes color from parent element. In the above code, icon color will be green.
2. We can change the color of icon using color attribute of <mat-icon>. The color can be changed to primary, accent, or warn.

<mat-icon svgIcon="user:video_icon" color="primary"></mat-icon>

Icon with `<button>`

The <mat-icon> can be used with <button> element using mat-icon-button, mat-fab and mat-mini-fab attributes.

<button mat-icon-button color="primary">
  <mat-icon svgIcon="user:video_icon"></mat-icon>
</button>

Icon with `<a>`

Find the example to use anchor element with <mat-icon>.

<a href="https://www.concretepage.com" target="_blank">
  <mat-icon svgIcon="user:menu_icon" color="accent"></mat-icon>
</a>

Complete Example

user.component.ts

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material/icon';
import { ATTACH_ICON, MENU_ICON } from './svg.icons';

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html'
})
export class UserComponent implements OnInit {
	constructor(private iconRegistry: MatIconRegistry,
		private sanitizer: DomSanitizer) {
		//Default namespace
		iconRegistry.addSvgIcon('search_icon', sanitizer.bypassSecurityTrustResourceUrl('http://localhost:4200/assets/search.svg'));
		iconRegistry.addSvgIconLiteral('attach_icon', sanitizer.bypassSecurityTrustHtml(ATTACH_ICON));

		//Specify namespace
		iconRegistry.addSvgIconInNamespace('user', 'video_icon', sanitizer.bypassSecurityTrustResourceUrl('http://localhost:4200/assets/video.svg'));
		iconRegistry.addSvgIconLiteralInNamespace('user', 'menu_icon', sanitizer.bypassSecurityTrustHtml(MENU_ICON));					
	}	
	ngOnInit() {
	}
}

user.component.html

<h3>SVG Icons</h3>
<table>
  <tr>
    <td>Search Icon</td>
    <td>
      <mat-icon svgIcon="search_icon"></mat-icon>
    </td>
  </tr>

  <tr>
    <td>Attach Icon</td>
    <td>
      <div style="color:green;">
        <mat-icon svgIcon="attach_icon"></mat-icon>
      </div>
    </td>
  </tr>

  <tr>
    <td>Video Icon</td>
    <td>
      <mat-icon svgIcon="user:video_icon" color="primary"></mat-icon>
    </td>
  </tr>

  <tr>
    <td>Menu Icon</td>
    <td>
      <mat-icon svgIcon="user:menu_icon" color="accent"></mat-icon>
    </td>
  </tr>
  
  <tr>
    <td>Video Button</td>
    <td>
      <button mat-icon-button color="primary">
        <mat-icon svgIcon="user:video_icon"></mat-icon>
      </button>
    </td>
  </tr>

  <tr>
    <td>Menu Anchor</td>
    <td>
      <a href="https://www.concretepage.com" target="_blank">
        <mat-icon svgIcon="user:menu_icon" color="accent"></mat-icon>
      </a>
    </td>
  </tr>
</table>

app.component.ts

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   template: `
		<app-user></app-user>
             `
})
export class AppComponent { 
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

import { AppComponent } from './app.component';
import { UserComponent } from './user.component';

@NgModule({
      imports: [
            BrowserModule,
            BrowserAnimationsModule,
            HttpClientModule,            
            MatButtonModule,
            MatIconModule
      ],
      declarations: [
            AppComponent,
            UserComponent
      ],
      providers: [
      ],
      bootstrap: [
            AppComponent
      ]
})
export class AppModule { }

In our application, SVG icon codes are in svg.icons.ts file, /assets/search.svg and /assets/video.svg files. To get these files, download the source code from link given below in our page.

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.