Displaying Icons in Angular Project

Introduction

<mat-icon> is a component in Angular Material which is used to show icons in our Angular project. We can use vector-based icons with this component. In this article, we will see how we can create an icon set. Icon set means keeping all the SVG icons in a single file and using the same file for displaying different icon throughout our project.

What are Icon sets?

Placing all the SVG icons into a single file. We will see in this file that there is a root <svg> tag which has all the nested <svg> tags nested inside. Different SVG icons are identified using the id.
Using this id we can identify different icons. 
Below is the example of the Icon set file. In this file, we have a main <svg> tag in which all other icons are nested. Suppose we have given an SVG, we just have to add the id attribute as shown in the file below. We have three icons and each has associated id with it. This id is served as the name for that particular icon.
 
<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink">
    <svg id="icon_notDone"
        xmlns="http://www.w3.org/2000/svg" width="18" height="15" viewBox="0 0 18 15">
        <path fill="none" fill-rule="evenodd" stroke="#757575" d="M7.4 1H2.6c-.88 0-1.592.72- 
          1.592 1.6L1 12.2c0 .88.72 1.6 1.6 1.6h12.8c.88 0 1.6-.72 1.6-1.6v-8c0-.88-.72-1.6-1.6- 
           1.6H9L7.4 1z"/>
    </svg>
    <svg id="icon_done" width="45" height="45">
        <path d="M0 0h24v24H0z" fill="none" />
        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 
           1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
    </svg>

    <svg id="icon_three_dots" style="width:24px;height:24px" viewBox="0 0 24 24">
        <path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" />
    </svg>
</svg>

Now we will see how to use these icons in different components. We need to register this file within our project.

Registering Icons

We can register icons using a service called MatIconRegistry. This is an injectable service which is used to provide the name to SVG URLs. We can even define an alias for CSS classes such as used in font-awesome. We will add SVG icons by registering them in our app.module.ts file:

import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from './modules/material/material.module';
import { AuthGuard } from './services/gaurds/auth.guard';
import { RolesAuthGuard } from './services/gaurds/roles.auth.guard';
import { AppComponent } from './app.component';
import { MatIconRegistry } from '@angular/material';


@NgModule({
  declarations: [
    AppComponent,
   
  ],
  imports: [
    BrowserModule,
    NgxDatatableModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MaterialModule,
    
  ],
  providers: [
    AuthService,
    AuthGuard,
   
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl(URL));
  }
}

Icon sets are registered using the addSvgIconSet method of MatIconRegistry service. We have used the DOM sanitizer service of Angular. We have used the bypassSecurityTrustResourceUrl method to bypass the security check and consider the value as a safe resource URL. The SVG icons are fetched via XMLHttpRequest. This is the best way of registering icons so that we can use the icons in all the feature modules as well. Import the MatIconRegistry and DOM Sanitizer services to register the Icon Set. The URL path should have the same domain as per the component page where we are using the icon. If we want to access from a different domain, our project server should be configured for cross-domain access. URL here refers to the "Icon Set File URL."

Displaying Icons Using <mat-icon>

Now we need to use the svgIcon property to display the specific icon from the Icon set file. We can give colors attribute as well. The colors can be primary, warn or accent using the theme. We can use the different icons in different icons by using the below mentioned <mat-icon> with svgIcon property. This property will have the id name of the icon specified in the Icon Set file. 

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

When we write the above statement, the will display the embedded SVG icon as the inline child of the component. It will not add any kind of wrapper elements such as div or span. We can directly add our inline style also with the element as well. Let us add some inline style to the icon.

 <mat-icon class="primary" svgIcon="icon_three_dots" style="cursor:pointer;"></mat-icon>   
 
Now we will see how we can add conditional svgIcon property. Suppose we have a variable isActive. If it is true we will show one icon. If it is false, we will show a different icon. We can even write some expression instead if the expression evaluates to truthy we will see one icon. If it evaluates to false, we will see a different icon.


<mat-icon svgIcon="{{ isActive ? 'icon_done : 'icon_notDone' }}" ></mat-icon>

Comments