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
|
|
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 |
|
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 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 |
|
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 |
|
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: matIconProperties
Name | Description |
---|---|
@Input()
|
Theme color palette for the component. |
@Input()
|
Name of an icon within a font set. |
@Input()
|
Font set that the icon is a part of. |
@Input()
|
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. |
|
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 |
---|---|
|
View box to set on the icon. |
|
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';
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
|
|
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.
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>
|
|
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. |