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
|
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
|
|
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 |
|
Parameters | |
resolver IconResolver
|
Resolver function to be registered. |
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 classes to be used for icon fonts when an |
|
Returns | |
string[]
|
|
getNamedSvgIcon | |
---|---|
Returns an Observable that produces the icon (as an |
|
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 |
|
Parameters | |
safeUrl SafeResourceUrl
|
URL from which to fetch the SVG icon. |
Returns | |
Observable<SVGElement>
|
|
registerFontClassAlias | |
---|---|
Defines an alias for CSS class names 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 If the registered font is a ligature font, then don't forget to also include the special
class
And use like this:
|
|
Parameters | |
alias string
|
Alias for the font. |
classNames string = alias
|
Class names override to be used instead of the alias. |
Returns | |
this
|
|
setDefaultFontSetClass | |
---|---|
Sets the CSS classes to be used for icon fonts when an |
|
Parameters | |
...classNames 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
fontIcon
attribute or the content of the<mat-icon>
component. If you register a custom font class, don't forget to also include the special classmat-ligature-font
. It is recommended to use the attribute alternative to prevent the ligature text to be selectable and to appear in search engine results. 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 fontIcon="home"></mat-icon> <mat-icon>home</mat-icon> <mat-icon fontSet="myfont" fontIcon="sun"></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://fontawesome-v4.github.io/examples/ Example:
<mat-icon fontSet="fa" fontIcon="alarm"></mat-icon>
Selector: mat-icon
Exported as: matIconProperties
Name | Description |
---|---|
@Input()
|
Theme color of the icon. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
@Input()
|
Name of an icon within a font set. |
@Input()
|
Font set that the icon is a part of. |
@Input({ transform: booleanAttribute })
|
Whether the icon should be inlined, automatically sizing the icon to match the font size of the element the icon is contained in. |
@Input()
|
Name of the icon in the SVG icon set. |
Interfaces
MatIconDefaultOptions
Default options for mat-icon
.
Properties
Name | Description |
---|---|
|
Theme color of the icon. This API is supported in M2 themes only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/icon/styling. For information on applying color variants in M3, see https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants |
|
Font set that the icon is a part of. |
IconOptions
Options that can be used to configure how an icon or the icons in an icon set are presented.
Properties
Name | Description |
---|---|
|
View box to set on the icon. |
|
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 |
---|---|
|
|
|
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;
Constants
MAT_ICON_DEFAULT_OPTIONS
Injection token to be used to override the default options for mat-icon
.
const MAT_ICON_DEFAULT_OPTIONS: InjectionToken<MatIconDefaultOptions>;
API reference for Angular Material icon-testing
import {MatIconTestingModule} from '@angular/material/icon/testing';
Services
FakeMatIconRegistry
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
|
|
addSvgIconResolver | |
---|---|
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
|
|
Classes
MatIconHarness
extends
ComponentHarness
Harness for interacting with a standard mat-icon in tests.
Properties
Name | Description |
---|---|
|
The selector for the host element of a |
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 |
|
Returns | |
Promise<TestElement>
|
|
async
isInline
|
|
---|---|
Gets whether the icon is inline. |
|
Returns | |
Promise<boolean>
|
|
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options IconHarnessFilters = {}
|
Options for filtering which icon instances are considered a match. |
Returns | |
HarnessPredicate<MatIconHarness>
|
a |
Interfaces
IconHarnessFilters
A set of criteria that can be used to filter a list of MatIconHarness
instances.
Properties
Name | Description |
---|---|
|
Filters based on the name of the icon. |
|
Filters based on the namespace of the icon. |
|
Filters based on the typef of the icon. |