Icon

Autocomplete
Badge
Bottom Sheet
Button
Button toggle
Card
Checkbox
Chips
Datepicker
Dialog
Divider
Expansion Panel
Form field
Grid list
Icon
Input
List
Menu
Paginator
Progress bar
Progress spinner
Radio button
Ripples
Select
Sidenav
Slide toggle
Slider
Snackbar
Sort header
Stepper
Table
Tabs
Toolbar
Tooltip
Tree
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

options?

IconOptions

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

options?

IconOptions

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.

options?

IconOptions

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.

options?

IconOptions

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

Namespace in which to register the icon set.

url

SafeResourceUrl

options?

IconOptions

Returns
this

addSvgIconSetLiteral

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

literal

SafeHtml

SVG source of the icon set.

options?

IconOptions

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.

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

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.

defaultColor: ThemePalette | undefined

Default color to fall back to if no value is set.

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.

API reference for Angular Material icon-testing

import {MatIconTestingModule} from '@angular/material/icon/testing';

A null icon registry that must be imported to allow disabling of custom icons.

Methods
addSvgIcon
Returns
this

addSvgIconInNamespace
Returns
this

addSvgIconLiteral
Returns
this

addSvgIconLiteralInNamespace
Returns
this

addSvgIconSet
Returns
this

addSvgIconSetInNamespace
Returns
this

addSvgIconSetLiteral
Returns
this

addSvgIconSetLiteralInNamespace
Returns
this

classNameForFontAlias
Parameters

alias

string

Returns
string

getDefaultFontSetClass
getNamedSvgIcon
Returns
Observable<SVGElement>

getSvgIconFromUrl
Returns
Observable<SVGElement>

registerFontClassAlias
Returns
this

setDefaultFontSetClass
Returns
this

Harness for interacting with a standard mat-icon in tests.

Methods
async
getName

Gets the name of the icon.
Returns
Promise<string | null>

async
getNamespace

Gets the namespace of the icon.
Returns
Promise<string | null>

async
getType

Gets the type of the icon.
Returns
Promise<IconType>

async
host

Gets a Promise for the TestElement representing the host element of the component.
Returns
Promise<TestElement>

async
isInline

Gets whether the icon is inline.
Returns
Promise<boolean>

A set of criteria that can be used to filter a list of MatIconHarness instances.

Properties
Name Description

name: string | RegExp

Filters based on the name of the icon.

namespace: string | null | RegExp

Filters based on the namespace of the icon.

type: IconType

Filters based on the typef of the icon.
Icon
Testing