Mat-Icon 大纲 - HTML

在 Angular Material 开发中，mat-icon 是一个非常好用的组件，可以通过代码或标签添加各种图标。本篇文章将介绍如何使用 mat-icon 组件，并提供一些有用的示例。

基本用法

通过 HTML 代码来使用 mat-icon，需要在 HTML 文件中导入 Material 的模块（通常是 MatIconModule），然后在需要使用图标的地方插入 mat-icon 标签，并在其内部使用 SVG 名称。例如：

<mat-icon>add</mat-icon>

其中 add 是内置的 SVG 名称。如果您需要使用其他的 SVG 图标，可以在 https://material.io/resources/icons/ 页面中找到相应的名称。

特殊用法

mat-icon 还支持在标签内部插入 HTML 图标代码。例如：

<mat-icon>
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path fill="none" d="M0 0h24v24H0z"/>
    <path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zM7 13h10v-2H7v2z"/>
  </svg>
</mat-icon>

上述代码的效果是显示一个带有内置 svg 标签的图标。

颜色和大小

默认情况下，mat-icon 会继承其父元素的颜色和大小。如果需要自定义，可以使用以下属性：

• color：用于设置颜色，可接受 Material 的主题颜色名称或任何有效的 CSS 颜色。
• fontSize：用于设置字体大小，可接受任何有效的 CSS 字体大小。

例如：

<mat-icon color="primary" fontSize="large">add</mat-icon>

示例

以下是一些常见的 mat-icon 示例：

| 示例 | 代码 | | --- | --- | | 常规图标 | <mat-icon>check</mat-icon> | | SVG 图标 | <mat-icon><svg>...</svg></mat-icon> | | 自定义颜色 | <mat-icon color="red">highlight_off</mat-icon> | | 自定义大小 | <mat-icon fontSize="32px">menu</mat-icon> |

总结

mat-icon 是一个非常方便的组件，可以轻松地在项目中添加图标。本篇文章介绍了 mat-icon 的基本用法、特殊用法、颜色和大小属性以及一些示例，希望可以帮助到大家。