Practical guide for loading SVG icons with Angular Material
Tags: angular, angularmaterial, materialicon, svgicon
Published: 2023-11-24 14:21:40

---
title: Practical guide for loading SVG icons with Angular Material
published: true
description: 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.
tags: angular,angularmaterial,materialicon,svgicon
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75txkxvmr6ydlcoxkv6b.png
canonical_url: https://angular-material.dev/articles/mat-icon-svg
---

> `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.

```ts
@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:

```html
<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.

```ts
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:

```html
<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
```

```ts
@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
<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>
```

```ts
@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 |

## Live Playground

Code is available on GitHub at [Angular-Material-Dev/article-mat-icon-svg](https://github.com/Angular-Material-Dev/article-mat-icon-svg)

{% embed https://stackblitz.com/github/Angular-Material-Dev/article-mat-icon-svg %}