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 |
Live Playground
Code is available on GitHub at Angular-Material-Dev/article-mat-icon-svg
Top comments (2)
Hi Dharmen Shah,
Your tips are very useful
Thanks for sharing
I am glad that you found them helpful ☺️
Some comments may only be visible to logged-in visitors. Sign in to view all comments.