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