Material 符号指南

什么是 Material Symbol？

Material Symbols 是我们最新的图标，将 2,500 多个字形整合到一个具有各种设计变体的字体文件中。符号提供三种样式和四个可调整的可变字体轴（填充、粗细、坡度和光学尺寸）。请参阅 Material Symbols 库中的全套 Material 符号。

FILL 轴

Fill 可让您修改默认的图标样式。单个图标可以同时呈现广告空缺和填充状态。

如需传达状态转换，请使用填充轴进行动画或互动。默认值为 0（默认值），值为 1（完全填充）。除了粗细轴外，填充也会影响图标的外观。

wght 轴

Weight 用于定义符号的笔触粗细，粗细范围介于窄字体 (100) 和粗体 (700) 之间。权重也会影响符号的总体大小。

GRAD 轴

坡度轴可视化

重量和等级会影响符号的粗细。对等级的调整比对权重的调整更为精细，并且对符号的尺寸影响较小。

对于某些文本字体，您还可以使用成绩。您可以匹配文本和符号的层级，以实现和谐的视觉效果。例如，如果文本字体的等级值为 -25，符号可以将其与合适的值（例如 -25）匹配。

您可以根据不同的需求使用成绩：

低强调度（例如 -25 等级）：如需减少深色背景上浅色符号的眩光，请使用低等级。

高强调度（例如 200 等级）：如需突出显示某个符号，请增加正等级。

opsz 轴

光学尺寸范围为 20dp 到 48dp。

为了让图片在不同尺寸下看起来相同，描边粗细（粗细）会随着图标大小的缩放而发生变化。光学尺寸提供了一种方式，可在您增大或缩小符号尺寸时自动调整描边粗细。

获取 Material 符号

Material Symbol 有多种格式，适用于不同类型的项目和平台，既适合应用开发者，也适合设计模型或原型的设计人员。

许可

Material Symbols 按 Apache 许可版本 2.0 提供。

浏览和下载单个图标

您可以从 Material Symbols 库获得 SVG 或 PNG 格式的一整套 Material 符号。它们适用于 Web、Android 和 iOS，或与任何设计工具搭配使用。

Git 代码库

git 代码库中包含一组 SVG 格式的完整 Material 符号。

$ git clone https://github.com/google/material-design-icons

使用 Material Symbol

在 Web 中使用

Material Symbols 字体是将 Material Symbols 整合到 Web 项目中的最简单方法。

系统会将这些图标打包为一种字体，以便 Web 开发者只需几行代码即可轻松整合这些图标。

使用 Google Fonts 的静态字体

如需设置在任何网页中使用的图标字体，最简单的方法是使用 Google Fonts。添加下面一行 HTML 代码：

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

上面的代码段包含每个轴的默认配置，权重为 400，光学尺寸为 48，等级为 0，填充为 0。

使用 Fonts CSS API 配置不同的轴值。请参考以下示例：

Google Fonts 的可变字体

如果您要通过 CSS 为图标添加动画效果，或者想要更精细地控制图标功能，请使用 Google Symbols 可变字体。使用范围（采用 number..number 格式）时，我们可以加载整个可变字体。请查看 Can I Use 的变量字体支持，了解您的用户能否加载可变字体（最有可能）。下面是一些示例：

甚至还能为它们添加动画效果！

自行托管字体

将图标字体托管在您控制的位置，以决定何时更新资源。例如，如果网址为 https://example.com/material-symbols.woff，请添加以下 CSS 规则：

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  src: url(https://example.com/material-symbols.woff) format('woff');
}

要正确渲染字体，请声明渲染图标的 CSS 规则。这些规则通常作为 Google Fonts API 样式表的一部分提供，但在自托管时需要手动添加到您的项目中：

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

在 HTML 中使用图标

上面提供的示例使用了一种名为连字的排版功能，这样一来，只需使用其文本名称即可呈现图标字形。网络浏览器会自动将文本连字替换为图标矢量，并提供与等效的数字字符引用相比更易于阅读的代码。例如，在 HTML 中，您将使用 arrow_forward 来表示图标，而不是 &#xE5C8;。对于其他图标，请使用图标名称的蛇形命名法（即用下划线替换空格）。

桌面设备和移动设备上的大多数现代浏览器都支持此功能。请参阅“Can I Uses 连字支持”，了解您的用户是否能够处理连字（最有可能）。

如果您确实需要支持不支持连词的浏览器，请使用数字字符引用（也称为代码点）指定图标，如下例所示：

选择任意图标并打开图标字体面板，即可找到 Material Symbols 库中的图标名称和代码点。每种图标字体在 Google Fonts git 代码库中都有一个代码点索引，用于显示完整的名称和字符代码。

在 Material Design 中设置图标样式

这些图标的设计遵循 Material Design 准则，使用建议的图标大小和颜色时效果最佳。以下样式可让您轻松应用我们建议的尺寸、颜色和活动状态。

在 Android 中使用

在 Material Symbols 库中，所有图标都采用矢量可绘制对象格式。如需了解详情，请参阅 Android Vector Asset Studio 文档。

在 iOS 中使用

这些图标也以 Apple Symbols 格式提供。如需详细了解这些符号，请参阅官方 Apple Symbols 概览和使用指南。

在 Flutter 中使用

我们计划让 Flutter 支持 Material Symbol。敬请关注最新动态。