Material Icons

The app uses Material Icons to display SVG icon images. Standard icons can be included by importing the MatIconModule into the relevant application module and using standard markup

module.ts

import { MatIconModule } from '@angular/material/icon';
 
@NgModule({
  imports: [
    MatIconModule,
  ]
})

component.html

<mat-icon>home</mat-icon>

A full list of available icons can be found at: https://fonts.google.com/icons (opens in a new tab)

Further documentation on available icon API can be found at: https://material.angular.io/components/icon/overview (opens in a new tab)

Custom Icons

Material icons supports the use of custom icons, however these must be registered in advance of use. This can be done by adding a method to the module that imports the icons, e.g.

module.ts

import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
 
@NgModule({
  imports: [
    MatIconModule,
  ]
})
 
constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ) {
    this.registerIcons();
  }
 
registerIcons() {
  const RESOURCE_ICONS = ['play_store']
 
  for (const iconName of RESOURCE_ICONS) {
    const url = this.domSanitizer.bypassSecurityTrustResourceUrl(
      `assets/resources/svgs/${iconName}.svg`
    );
    this.matIconRegistry.addSvgIconInNamespace('resources_tool',iconName, url);
  }
}

💡

Tip When registering custom icons it is good to use a namespace so that icons with the same name do not conflict (think of 'clear' weather vs 'clear' form input)

The code above takes a list of icons, with corresponding svg asset. All icon names are registered in the resources_tool namespace to be used as:

component.html

<mat-icon svgIcon="resources_tool:play_store"></mat-icon>

Data Sharing NX Generators