API reference for Angular Material icon

import {MatIconModule} from '@angular/material/icon';

Services

`MatIconRegistry`

Service to register and display icons used by the <mat-icon> component.

Registers icon URLs by namespace and name.
Registers icon set URLs by namespace.
Registers aliases for CSS classes, for use with icon fonts.
Loads icons from URLs and extracts individual icons from icon sets.

Methods

addSvgIcon
Registers an icon by URL in the default namespace.
Parameters
iconName `string`
url `SafeResourceUrl`
options? `IconOptions`
Returns
`this`

addSvgIconInNamespace
Registers an icon by URL in the specified namespace.
Parameters
namespace `string`
iconName `string`
url `SafeResourceUrl`
options? `IconOptions`
Returns
`this`

addSvgIconLiteral
Registers an icon using an HTML string in the default namespace.
Parameters
iconName `string`
literal `SafeHtml`
options? `IconOptions`
Returns
`this`

addSvgIconLiteralInNamespace
Registers an icon using an HTML string in the specified namespace.
Parameters
namespace `string`
iconName `string`
literal `SafeHtml`
options? `IconOptions`
Returns
`this`

addSvgIconResolver
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.
Parameters
resolver `IconResolver`
Returns
`this`

addSvgIconSet
Registers an icon set by URL in the default namespace.
Parameters
url `SafeResourceUrl`
options? `IconOptions`
Returns
`this`

addSvgIconSetInNamespace
Registers an icon set by URL in the specified namespace.
Parameters
namespace `string`
url `SafeResourceUrl`
options? `IconOptions`
Returns
`this`

addSvgIconSetLiteral
Registers an icon set using an HTML string in the default namespace.
Parameters
literal `SafeHtml`
options? `IconOptions`
Returns
`this`

addSvgIconSetLiteralInNamespace
Registers an icon set using an HTML string in the specified namespace.
Parameters
namespace `string`
literal `SafeHtml`
options? `IconOptions`
Returns
`this`

classNameForFontAlias
Returns the CSS class name associated with the alias by a previous call to registerFontClassAlias. If no CSS class has been associated, returns the alias unmodified.
Parameters
alias `string`
Returns
`string`

getDefaultFontSetClass
Returns the CSS class name to be used for icon fonts when an `<mat-icon>` component does not have a fontSet input value, and is not loading an icon by name or URL.
Returns
`string`

getNamedSvgIcon
Returns an Observable that produces the icon (as an `<svg>` DOM element) with the given name and namespace. The icon must have been previously registered with addIcon or addIconSet; if not, the Observable will throw an error.
Parameters
name `string`
namespace `string = ''`
Returns
`Observable<SVGElement>`

getSvgIconFromUrl
Returns an Observable that produces the icon (as an `<svg>` DOM element) from the given URL. The response from the URL may be cached so this will not always cause an HTTP request, but the produced element will always be a new copy of the originally fetched icon. (That is, it will not contain any modifications made to elements previously returned).
Parameters
safeUrl `SafeResourceUrl`
Returns
`Observable<SVGElement>`

registerFontClassAlias
Defines an alias for a CSS class name to be used for icon fonts. Creating an matIcon component with the alias as the fontSet input will cause the class name to be applied to the `<mat-icon>` element.
Parameters
alias `string`
className `string = alias`
Returns
`this`

setDefaultFontSetClass
Sets the CSS class name to be used for icon fonts when an `<mat-icon>` component does not have a fontSet input value, and is not loading an icon by name or URL.
Parameters
className `string`
Returns
`this`

Directives

`MatIcon`

Component to display an icon. It can be used in the following ways:

Specify the svgIcon input to load an SVG icon from a URL previously registered with the addSvgIcon, addSvgIconInNamespace, addSvgIconSet, or addSvgIconSetInNamespace methods of MatIconRegistry. If the svgIcon value contains a colon it is assumed to be in the format "[namespace]:[name]", if not the value will be the name of an icon in the default namespace. Examples: <mat-icon svgIcon="left-arrow"></mat-icon> <mat-icon svgIcon="animals:cat"></mat-icon>
Use a font ligature as an icon by putting the ligature text in the content of the <mat-icon> component. By default the Material icons font is used as described at http://google.github.io/material-design-icons/#icon-font-for-the-web. You can specify an alternate 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. Examples: <mat-icon>home</mat-icon> <mat-icon fontSet="myfont">sun</mat-icon>
Specify a font glyph to be included via CSS rules by setting the fontSet input to specify the font, and the fontIcon input to specify the icon. Typically the fontIcon will specify a CSS class which causes the glyph to be displayed via a :before selector, as in https://fortawesome.github.io/Font-Awesome/examples/ Example: <mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>

Selector: mat-icon

Exported as: matIcon

Properties

Name	Description
@Input() `color: ThemePalette`	Theme color palette for the component.
@Input() `fontIcon: string`	Name of an icon within a font set.
@Input() `fontSet: string`	Font set that the icon is a part of.
@Input() `inline: boolean`	Whether the icon should be inlined, automatically sizing the icon to match the font size of the element the icon is contained in.
@Input() `svgIcon: string`	Name of the icon in the SVG icon set.
`defaultColor: ThemePalette \| undefined`	Default color to fall back to if no value is set.

Interfaces

`IconOptions`

Options that can be used to configure how an icon or the icons in an icon set are presented.

Properties

Name	Description
`viewBox: string`	View box to set on the icon.
`withCredentials: boolean`	Whether or not to fetch the icon or icon set using HTTP credentials.

`SafeResourceUrlWithIconOptions`

Object that specifies a URL from which to fetch an icon and the options to use for it.

Properties

Name	Description
`options: IconOptions`
`url: SafeResourceUrl`

Type aliases

`IconResolver`

Function that will be invoked by the icon registry when trying to resolve the URL from which to fetch an icon. The returned URL will be used to make a request for the icon.

type IconResolver = (name: string, namespace: string) => (SafeResourceUrl | SafeResourceUrlWithIconOptions | null);