图标 Icon

icon 的 API

Angular Material icon API 参考文档

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

本服务用来注册和显示供 <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.

参数

Parameters

iconName

string

图标要注册成的名称。

Name under which the icon should be registered.

url

SafeResourceUrl

options?

IconOptions

返回值

Returns

this
addSvgIconInNamespace

在指定的命名空间中按 URL 注册一个图标。

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

在默认命名空间中使用 HTML 字符串注册一个图标。

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 源码。

SVG source of the icon.

options?

IconOptions

返回值

Returns

this
addSvgIconLiteralInNamespace

在指定的命名空间中,以 HTML 字符串注册一个图标。

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 源码。

SVG source of the icon.

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.

参数

Parameters

resolver

IconResolver

要注册的解析器函数。

Resolver function to be registered.

返回值

Returns

this
addSvgIconSet

在默认命名空间中通过 URL 注册一个图标集。

Registers an icon set by URL in the default namespace.

参数

Parameters

url

SafeResourceUrl

options?

IconOptions

返回值

Returns

this
addSvgIconSetInNamespace

在指定的命名空间中,使用 HTML 字符串注册一个图标集。

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

在默认命名空间中,使用 HTML 字符串注册一个图标集。

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

参数

Parameters

literal

SafeHtml

图标集的 SVG 源码。

SVG source of the icon set.

options?

IconOptions

返回值

Returns

this
addSvgIconSetLiteralInNamespace

在指定的命名空间中,使用 HTML 字符串注册一个图标集。

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 源码。

SVG source of the icon set.

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

<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.

参数

Parameters

name

string

要检索的图标名称。

Name of the icon to be retrieved.

namespace

string = ''

要在其中查找图标的命名空间。

Namespace in which to look for the icon.

返回值

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

参数

Parameters

safeUrl

SafeResourceUrl

要从中获取 SVG 图标的 URL。

URL from which to fetch the SVG icon.

返回值

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.

参数

Parameters

alias

string

该字体的别名。

Alias for the font.

className

string = alias

用于代替别名进行改写的类名。

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

参数

Parameters

className

string

返回值

Returns

this

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

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.

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

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.

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

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

属性
名称 描述

options: IconOptions

url: SafeResourceUrl

尝试解析用来提取图标的 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';

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

方法
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

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

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

方法
异步
getName

Gets the name of the icon.

返回值

Returns

Promise<string | null>
异步
getNamespace

Gets the namespace of the icon.

返回值

Returns

Promise<string | null>
异步
getType

Gets the type of the icon.

返回值

Returns

Promise<IconType>
异步
host

获取一个代表该组件宿主元素的 TestElementPromise

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

返回值

Returns

Promise<TestElement>
异步
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.

属性
名称 描述

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.