Practical guide for loading SVG icons with Angular Material

#angular #angularmaterial #materialicon #svgicon

mat-icon makes it easier to use vector-based icons in your app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).

In this guide, we will learn how to use SVG icons with mat-icon. We will look at all the methods provided by MatIconRegistry and how to practically use each.

Before moving ahead, make sure to either import HttpClientModule or use provideHttpClient from the @angular/common/http package in your NgModule imports or ApplicationConfig providers.

`MatIconRegistry`

MatIconRegistry is a service to register and display icons used by the <mat-icon> component. It helps to:

Register icon URLs by namespace and name
Register icon set URLs by namespace
Register aliases for CSS classes, for use with icon fonts.
Loads icons from URLs and extracts individual icons from icon sets.

Let's look at all of it's methods and a code snippet for each to explain it's practical usage.

`addSvgIcon`

This method registers an icon by URL in the default namespace.

@Component({
  template: `
      <mat-icon
        svgIcon="face"
        aria-hidden="false"
        aria-label="Example face SVG icon"
      ></mat-icon>
  `,
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      "face",
      sanitizer.bypassSecurityTrustResourceUrl("/assets/icons/face.svg")
    );
  }
}

`addSvgIconInNamespace`

This method registers an icon by URL in the specified namespace.

This is same as addSvgIcon, but you can assign the icon to a namespace. For example, if your namespace is app, you would use the icon like below:

<mat-icon
    svgIcon="app:face"
    aria-hidden="false"
    aria-label="Example settings SVG icon"
></mat-icon>

`addSvgIconLiteral`

This method registers an icon using an HTML string in the default namespace.

const THUMBUP_ICON =
  `
  <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.` +
  `44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5` +
  `1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-1.91l-.01-.01L23 10z"/>
  </svg>
`;
@Component({
  template: `
      <mat-icon
      svgIcon="thumbs-up"
      aria-hidden="false"
      aria-label="Example thumbs-up SVG icon"
    ></mat-icon>
  `,
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconLiteral(
      "thumbs-up",
      sanitizer.bypassSecurityTrustHtml(THUMBUP_ICON)
    );
  }
}

`addSvgIconLiteralInNamespace`

This method registers an icon using an HTML string in the specified namespace.

This is same as addSvgIcon, but you can assign the icon to a namespace. For example, if your namespace is app, you would use the icon like below:

<mat-icon
    svgIcon="app:thumbs-up"
    aria-hidden="false"
    aria-label="Example thumbs-up SVG icon"
></mat-icon>

`addSvgIconResolver`

This method registers an icon resolver function with the registry. The function will be invoked with the name and namespace of an icon when the registry tries to resolve the URL from which to fetch the icon. The resolver is expected to return a SafeResourceUrl that points to the icon, an object with the icon URL and icon options, or null if the icon is not supported. Resolvers will be invoked in the order in which they have been registered.

Use this method when you want to dynamically load icons from a single folder. For example, below can be location of your icons:

src/assets/icons/done.svg
src/assets/icons/favorite.svg

@Component({
  template: `
      <mat-icon
        svgIcon="done"
        aria-hidden="false"
        aria-label="Example done SVG icon"
      ></mat-icon>
      <mat-icon
        svgIcon="favorite"
        aria-hidden="false"
        aria-label="Example favorite SVG icon"
      ></mat-icon>
  `,
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    const resolver: IconResolver = (name) =>
      sanitizer.bypassSecurityTrustResourceUrl(`/assets/icons/${name}.svg`);
    iconRegistry.addSvgIconResolver(resolver);
  }
}

In above code, note the usage of resolver function. It accepts an argument of icon name, which is passed through addSvgIconResolver.

`addSvgIconSet`

This method registers an icon set by URL in the default namespace.

Use this method when you have all icons present in a single SVG sprite file.

Assuming that you have an SVG sprite file present at src/assets/icons-sprite.svg with below content:

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="search" height="24" viewBox="0 -960 960 960" width="24">
        <path
            d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" />
    </symbol>
    <symbol id="settings" height="24" viewBox="0 -960 960 960" width="24">
        <path
            d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z" />
    </symbol>
</svg>

@Component({
  template: `
      <mat-icon
        svgIcon="search"
        aria-hidden="false"
        aria-label="Example search SVG icon"
      ></mat-icon>
      <mat-icon
        svgIcon="settings"
        aria-hidden="false"
        aria-label="Example settings SVG icon"
      ></mat-icon>
  `,
})
export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIconSet(
      sanitizer.bypassSecurityTrustResourceUrl("/assets/icons-sprite.svg")
    );
  }
}

Summary

Below are list of all MatIconRegistry methods related to load SVGs in mat-icon.

#	Methods	Use when
1	`addSvgIcon`, `addSvgIconInNamespace`	Each icon has separate SVG file
2	`addSvgIconLiteral`, `addSvgIconLiteralInNamespace`	Each icon has SVG string literals, for example, icon string is coming from server
3	`addSvgIconResolver`	Individual icon's SVG files' location share same logic, for example, they are located under one folder
4	`addSvgIconSet`, `addSvgIconSetInNamespace`	All icons are present in same SVG sprite file
5	`addSvgIconSetLiteral`, `addSvgIconSetLiteralInNamespace`	All icons are present in same SVG sprite and sprite is stored as string, for example, coming from server