DEV Community

Cover image for Practical guide for loading SVG icons with Angular Material
Dharmen Shah for Angular Material Dev

Posted on • Originally published at angular-material.dev

Practical guide for loading SVG icons with Angular Material

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")
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
@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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
@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")
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

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

Live Playground

Code is available on GitHub at Angular-Material-Dev/article-mat-icon-svg

Top comments (0)