<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.).
Registering icons: MatIconRegistry is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary.
Font icons with ligatures: Some fonts are designed to show icons by using ligatures, for example by rendering the text "home" as a home image. To use a ligature icon, put its text in the content of the mat-icon component.
By default,
<mat-icon>
expects the
Material icons font. (You will still need to include the HTML to load the font and its CSS, as described in the link). You can specify a different font by setting the
fontSet input to either the CSS class to apply to use the desired font, or to an alias previously registered with
MatIconRegistry.registerFontClassAlias.
<mat-icon>
When an mat-icon component displays an SVG icon, it does so by directly inlining the SVG content into the page as a child of the component.
(Rather than using an tag or a div background image). This makes it easier to apply CSS styles to SVG icons. For example, the default color of the SVG content is the CSS
currentColor value.
This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the "color" style on the mat-icon element.
In order to prevent XSS vulnerabilities, any SVG URLs passed to the MatIconRegistry must be marked as trusted resource URLs by using Angular's DomSanitizer service.