Icon

API for icon

API reference for Angular Material icon

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

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

Name under which the icon should be registered.

url

SafeResourceUrl

Returns
this

addSvgIconInNamespace

Registers an icon by URL in the specified namespace.
Parameters

namespace

string

Namespace in which the icon should be registered.

iconName

string

Name under which the icon should be registered.

url

SafeResourceUrl

Returns
this

addSvgIconLiteral

Registers an icon using an HTML string in the default namespace.
Parameters

iconName

string

Name under which the icon should be registered.

literal

SafeHtml

SVG source of the icon.
Returns
this

addSvgIconLiteralInNamespace

Registers an icon using an HTML string in the specified namespace.
Parameters

namespace

string

Namespace in which the icon should be registered.

iconName

string

Name under which the icon should be registered.

literal

SafeHtml

SVG source of the icon.
Returns
this

addSvgIconSet

Registers an icon set by URL in the default namespace.
Parameters

url

SafeResourceUrl

Returns
this

addSvgIconSetInNamespace

Registers an icon set by URL in the specified namespace.
Parameters

namespace

string

Namespace in which to register the icon set.

url

SafeResourceUrl

Returns
this

addSvgIconSetLiteral

Registers an icon set using an HTML string in the default namespace.
Parameters

literal

SafeHtml

SVG source of the icon set.
Returns
this

addSvgIconSetLiteralInNamespace

Registers an icon set using an HTML string in the specified namespace.
Parameters

namespace

string

Namespace in which to register the icon set.

literal

SafeHtml

SVG source of the icon set.
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

Name of the icon to be retrieved.

namespace

string = ''

Namespace in which to look for the icon.
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

URL from which to fetch the SVG icon.
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

Alias for the font.

className

string = alias

Class name override to be used instead of the 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

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.