Angular Material

Angular Material icon API 参考文档

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

服务

`MatIconRegistry`

本服务用来注册和显示供 <mat-icon> 组件使用的图标。

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

按命名空间和名称注册图标 URL。
Registers icon URLs by namespace and name.
按命名空间注册图标集的 URL。
Registers icon set URLs by namespace.
为 CSS 类注册别名，用于字体图标。
Registers aliases for CSS classes, for use with icon fonts.
从 URL 中加载图标，并从图标集中提取各个图标。
Loads icons from URLs and extracts individual icons from icon sets.

方法

addSvgIcon
在默认命名空间中用 URL 注册一个图标。 Registers an icon by URL in the default namespace. 图标要注册成的名称。 @param iconName Name under which the icon should be registered. @param url
参数 Parameters
iconName `string`
url `SafeResourceUrl`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconInNamespace
在指定的命名空间中按 URL 注册一个图标。 Registers an icon by URL in the specified namespace. 要注册图标的命名空间。 @param namespace Namespace in which the icon should be registered. 图标要注册成的名称。 @param iconName Name under which the icon should be registered. @param url
参数 Parameters
namespace `string`
iconName `string`
url `SafeResourceUrl`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconLiteral
在默认命名空间中使用 HTML 字符串注册一个图标。 Registers an icon using an HTML string in the default namespace. 图标要注册成的名称。 @param iconName Name under which the icon should be registered. 图标 SVG 源码。 @param literal SVG source of the icon.
参数 Parameters
iconName `string`
literal `SafeHtml`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconLiteralInNamespace
在指定的命名空间中，以 HTML 字符串注册一个图标。 Registers an icon using an HTML string in the specified namespace. 要注册图标的命名空间。 @param namespace Namespace in which the icon should be registered. 图标要注册成的名称。 @param iconName Name under which the icon should be registered. 图标的 SVG 源码。 @param literal SVG source of the icon.
参数 Parameters
namespace `string`
iconName `string`
literal `SafeHtml`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconResolver
用注册表注册一个图标解析器函数。当注册表尝试解析用来获取图标的 URL 时，会以图标名称和命名空间为参数调用该函数。该解析器需要返回一个指向图标的 `SafeResourceUrl`，一个带有图标 URL 和图标选项的对象，如果不支持该图标，则返回 `null`。这些解析器会按照其注册时的顺序进行调用。 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. 要注册的解析器函数。 @param resolver Resolver function to be registered.
参数 Parameters
resolver `IconResolver`
返回值 Returns
`this`

addSvgIconSet
在默认命名空间中通过 URL 注册一个图标集。 Registers an icon set by URL in the default namespace. @param url
参数 Parameters
url `SafeResourceUrl`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconSetInNamespace
在指定的命名空间中，使用 HTML 字符串注册一个图标集。 Registers an icon set by URL in the specified namespace. 要在其中注册图标集的命名空间。 @param namespace Namespace in which to register the icon set. @param url
参数 Parameters
namespace `string`
url `SafeResourceUrl`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconSetLiteral
在默认命名空间中，使用 HTML 字符串注册一个图标集。 Registers an icon set using an HTML string in the default namespace. 图标集的 SVG 源码。 @param literal SVG source of the icon set.
参数 Parameters
literal `SafeHtml`
options? `IconOptions`
返回值 Returns
`this`

addSvgIconSetLiteralInNamespace
在指定的命名空间中，使用 HTML 字符串注册一个图标集。 Registers an icon set using an HTML string in the specified namespace. 要在其中注册图标集的命名空间。 @param namespace Namespace in which to register the icon set. 图标集的 SVG 源码。 @param literal SVG source of the icon set.
参数 Parameters
namespace `string`
literal `SafeHtml`
options? `IconOptions`
返回值 Returns
`this`

classNameForFontAlias
返回与先前调用 registerFontClassAlias 返回的别名相关联的 CSS 类名。如果没有关联的 CSS 类，则直接返回别名。 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

getDefaultFontSetClass
当 `<mat-icon>` 组件的输入属性 fontSet 没有值，并且不是在按名字或 URL 加载图标时，返回用于字体图标的 CSS 类名。 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.
`string`

当 <mat-icon> 组件的输入属性 fontSet 没有值，并且不是在按名字或 URL 加载图标时，返回用于字体图标的 CSS 类名。

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
返回一个 Observable，用于根据指定的 URL 生成图标（比如 `<svg>` DOM 元素）。该图标必须先前已经使用 addIcon 或 addIconSet 注册过；如果没有，这个 Observable 就会抛出一个错误。 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. 要检索的图标名称。 @param name Name of the icon to be retrieved. 要在其中查找图标的命名空间。 @param namespace Namespace in which to look for the icon.
参数 Parameters
name `string`
namespace `string = ''`
返回值 Returns
`Observable<SVGElement>`

getSvgIconFromUrl
返回一个 Observable，用于根据指定的 URL 生成图标（比如 `<svg>` DOM 元素）。该 URL 的响应可能会被缓存，所以这并不总会导致 HTTP 请求，但是所生成的元素始终是原来获得的图标的新副本。（也就是说，它不会对以前返回的元素做任何修改）。 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). 要从中获取 SVG 图标的 URL。 @param safeUrl URL from which to fetch the SVG icon.
参数 Parameters
safeUrl `SafeResourceUrl`
返回值 Returns
`Observable<SVGElement>`

registerFontClassAlias
为要用作字体图标的 CSS 类名定义一个别名。用此别名作为输入属性 fontSet 来创建 matIcon 组件会导致这个类名被应用到 `<mat-icon>` 元素中。 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. 该字体的别名。 @param alias Alias for the font. 用于代替别名进行改写的类名。 @param className Class name override to be used instead of the alias.
参数 Parameters
alias `string`
className `string = alias`
返回值 Returns
`this`

setDefaultFontSetClass
当 `<mat-icon>` 组件的输入属性 fontSet 没有值，并且不是在按名字或 URL 加载图标时，设置要用于字体图标的 CSS 类名。 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. @param className
参数 Parameters
className `string`
返回值 Returns
`this`

指令

`MatIcon`

要显示图标的组件。它可以通过以下方式使用：

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

指定输入属性 svgIcon，用于从之前使用 MatIconRegistry 的 addSvgIcon，addSvgIconInNamespace，addSvgIconSet 或 addSvgIconSetInNamespace 方法注册的 URL 中加载 SVG 图标。如果 svgIcon 的值包含冒号，则假定其格式为“[namespace]:[name]”，否则把该值视为默认命名空间中某个图标的名字。例如： <mat-icon svgIcon="left-arrow"></mat-icon> <mat-icon svgIcon="animals:cat"></mat-icon>
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>
在 <mat-icon> 组件的内容中，可以用合字作为图标。默认情况下会使用 Material 字体图标，如 http://google.github.io/material-design-icons/#icon-font-for-the-web 所属。你可以指定一种替代字体，方法是把输入属性 fontSet 设置为要使用字体的 CSS 类，或者是之前用 MatIconRegistry.registerFontClassAlias 注册的别名。示例： <mat-icon>home</mat-icon> <mat-icon fontSet="myfont">sun</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>
指定要通过 CSS 规则包含的字体字形，方法是设置输入属性 fontSet 以指定字体，并使用输入属性 fontIcon 来指定图标。通常，fontIcon 会指定一个 CSS 类，它会让这个字形通过 :before 选择器显示出来，就像 https://fortawesome.github.io/Font-Awesome/examples/ 中一样，例如： <mat-icon fontSet="fa" fontIcon="alarm"></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>

选择器： mat-icon

导出为： matIcon

属性

名称	描述
@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`	SVG 图标集中的图标名称。 Name of the icon in the SVG icon set.
`defaultColor: ThemePalette \| undefined`	Default color to fall back to if no value is set.

接口

`IconOptions`

一个选项，可以用来配置如何展示一个图标或图标集。

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

属性

名称描述

名称	描述
`viewBox: string`	在图标上设置的 viewBox。 View box to set on the icon.
`withCredentials: boolean`	是否要使用 HTTP 凭据获取图标或图标集。 Whether or not to fetch the icon or icon set using HTTP credentials.

viewBox: string

在图标上设置的 viewBox。

View box to set on the icon.

withCredentials: boolean

是否要使用 HTTP 凭据获取图标或图标集。

Whether or not to fetch the icon or icon set using HTTP credentials.

`SafeResourceUrlWithIconOptions`

该对象用于指定要提取图标的 URL 以及要使用的图标选项。

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

属性

名称	描述
`options: IconOptions`
`url: SafeResourceUrl`

类型别名

`IconResolver`

尝试解析用来提取图标的 URL 时，图标注册表会调用该函数。返回的 URL 将用于发出图标请求。

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);

Angular Material icon-testing API 参考文档

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

服务

`FakeMatIconRegistry`

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

方法

addSvgIcon

addSvgIcon
`this`

返回值

Returns

this

addSvgIconInNamespace

addSvgIconInNamespace
`this`

返回值

Returns

this

addSvgIconLiteral

addSvgIconLiteral
`this`

返回值

Returns

this

addSvgIconLiteralInNamespace

addSvgIconLiteralInNamespace
`this`

返回值

Returns

this

addSvgIconResolver

addSvgIconResolver
`this`

返回值

Returns

this

addSvgIconSet

addSvgIconSet
`this`

返回值

Returns

this

addSvgIconSetInNamespace

addSvgIconSetInNamespace
`this`

返回值

Returns

this

addSvgIconSetLiteral

addSvgIconSetLiteral
`this`

返回值

Returns

this

addSvgIconSetLiteralInNamespace

addSvgIconSetLiteralInNamespace
`this`

返回值

Returns

this

classNameForFontAlias
参数 Parameters
alias `string`
返回值 Returns
`string`

getDefaultFontSetClass

getNamedSvgIcon

getNamedSvgIcon
`Observable<SVGElement>`

返回值

Returns

Observable<SVGElement>

getSvgIconFromUrl

getSvgIconFromUrl
`Observable<SVGElement>`

返回值

Returns

Observable<SVGElement>

registerFontClassAlias

registerFontClassAlias
`this`

返回值

Returns

this

setDefaultFontSetClass

setDefaultFontSetClass
`this`

返回值

Returns

this

类

`MatIconHarness` extends ComponentHarness

在测试中用来与标准 mat-icon 进行交互的测试工具。

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

方法

异步 getName
Gets the name of the icon.
`Promise<string \| null>`

异步

getName

Gets the name of the icon.

返回值

Returns

Promise<string | null>

异步 getNamespace
Gets the namespace of the icon.
`Promise<string \| null>`

异步

getNamespace

Gets the namespace of the icon.

返回值

Returns

Promise<string | null>

异步 getType
Gets the type of the icon.
`Promise<IconType>`

异步

getType

Gets the type of the icon.

返回值

Returns

Promise<IconType>

异步 host
获取一个代表该组件宿主元素的 `TestElement` 型 `Promise`。 Gets a `Promise` for the `TestElement` representing the host element of the component.
`Promise<TestElement>`

异步

host

获取一个代表该组件宿主元素的 TestElement 型 Promise。

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

返回值

Returns

Promise<TestElement>

异步 isInline
Gets whether the icon is inline.
`Promise<boolean>`

异步

isInline

Gets whether the icon is inline.

返回值

Returns

Promise<boolean>

接口

`IconHarnessFilters`

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

属性

名称	描述
`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.

图标 API 目录

Testing

Angular Material icon API 参考文档

link 服务

link MatIconRegistry

方法

link 指令

link MatIcon

属性

link 接口

link IconOptions

属性

link SafeResourceUrlWithIconOptions

属性

link 类型别名

link IconResolver

Angular Material icon-testing API 参考文档

link 服务

link FakeMatIconRegistry

方法

link 类

link MatIconHarness extends ComponentHarness

方法

link 接口

link IconHarnessFilters

属性

服务

`MatIconRegistry`

指令

`MatIcon`

接口

`IconOptions`

`SafeResourceUrlWithIconOptions`

类型别名

`IconResolver`

服务

`FakeMatIconRegistry`

类

`MatIconHarness` extends ComponentHarness

接口

`IconHarnessFilters`