Angular Material 图标

Angular Material 图标 是一个在应用程序中显示基于矢量的图标的组件。除了使用 Google 内容图标外，它还支持图标字体和 SVG 图标。

下表列出了 md-icon 不同特性的参数和描述。

字体图标

某些字体旨在通过将文本呈现为家庭图像，从而使用连字来显示图标。 要使用连字图标，请将文本插入磨砂图标组件的内容中。 默认情况下，<mat-icon> 需要内容图标字体。

使用 CSS 的字体图标

字体还可以通过为每个图标图定义一个 CSS 类来显示图标，该类位于选择器图标之前。 如果我们要使用这样的字体，请将字体输入设置为字体的 CSS 类，并设置字体图标输入以显示特定图标。

您可以指定默认字体类，以便在未明确设置字体集时使用，方法是为两种类型的字体图标都设置 MatIconRegistry.setDefaultFontSetClass。

SVG 图标

<mat-icon> 通过将 SVG 内容作为其自身的子级插入到 DOM 中来显示 SVG 图标。 这种方法比 <img> 标签或 CSS background-image 提供了优势，因为它允许使用 CSS 对 SVG 进行样式设置。 SVG 内容的默认颜色是 CSS currentColor 值。 SVG 图标的颜色与周围文本的颜色相同，并且允许通过在磨砂图标元素上设置颜色样式来更改颜色。

为避免 XSS 漏洞，MatIconRegistry 中传递的任何 SVG URL 和 HTML 字符串都必须使用 Angular 的 DomSanitizer 服务标记为受信任。

命名图标

使用 AddSvgIcon、addSvgIconInNamespace、addSvgIconLiteral 或 MatSconRegistry 的 AddSvgIconLiteralInNamespace 方法将图标与图标 URL 相关联。 在默认命名空间中直接使用该名称。 但在非默认命名空间中，使用格式 [命名空间]: [名称]。

图标集

图标集允许将多个图标分组到一个 SVG 文件中。 这是通过创建一个包含一些嵌套 <svg> 标签 在其 <defs> 部分中的单个根 <svg> 标签来完成的。 每个嵌套标签都使用 ID 属性进行标识。 该 ID 用作图标的名称。

要显示图标集中的图标，请以与注册图标相同的方式使用 SVG 图标输入。 许多图标集也可以在同一命名空间中注册。

主题化

图标使用当前的字体颜色 (currentColor)。 颜色会更改为匹配当前主题的颜色，可以使用 color 属性。 它可以更改为“Primary”、“Pronunciation”或“Warning”。

可访问性

对于屏幕阅读器用户，单独的图标不提供任何有用的信息，例如 <img> 元素。 <mat-icon> 的用户应提供有关图标用途的其他信息。 在可访问性方面，有三个类别

对于屏幕阅读器用户，单独的图标不提供任何有用的信息，例如 <img> 元素。 <mat-icon> 的用户应提供有关图标用途的其他信息。 在可访问性方面，有三个类别

装饰性图标

它没有真正的语义意义，并且纯粹是装饰性的。 当图标是装饰性的并且没有传达任何真正的语义含义时，<mat-icon> 元素将标记为 aria-hidden="true"。

交互式图标

在交互式图标中，用户将单击图标或与之交互以执行某些操作。 对于屏幕阅读器用户，单独的符号不是交互式元素。 <mat-icon> 元素必须是 <button> 或 <a> 元素的子级。

父级 <button> 或 <a> 必须是直接文本内容、aria-label 或由 aria-label 提供的有意义的标签。

指示器图标

它传达一些信息，例如状态。 它使用图标代替大型消息中的文本。 当图标向用户提供一些信息时，无论是作为内置指示器还是在文本块中，都可以向屏幕阅读器提供该信息。 添加一个 <span>，并将文本作为与 <mat-icon> 元素最接近的同级元素，该元素传达与图标完全相同的信息。

它使消息不可见，但仍然对屏幕阅读器用户可用。

动画图标

动画反映了执行操作的方式，从而增加了趣味性和愉悦感。

每个图标的动画都与视觉设计对齐。

过渡链接

过渡将两个视觉状态之间的动画图标连接起来。 在两个图标之间过渡表示它们彼此链接，并且按下第一个图标会生成另一个图标。

过渡在一个图标中显示两个图标之间的连接。

过渡在开启和关闭状态之间切换图标。

示例

该示例显示了 md-icons 指令的用法以及图标的用法。

am_icons.htm

输出