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 `` 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. ```angular-ts @Component({ template: ` `, }) 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: ```angular-html ``` ### `addSvgIconLiteral` This method registers an icon using an HTML string in the default namespace. ```angular-ts const THUMBUP_ICON = ` `; @Component({ template: ` `, }) 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: ```angular-html ``` ### `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 ``` ```angular-ts @Component({ template: ` `, }) 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 ``` ```angular-ts @Component({ template: ` `, }) 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)