此页面由 Cloud Translation API 翻译。

Material 符号指南

什么是 Material 符号？

Material Symbols 是我们最新的图标，它将 2500 多个字形整合到一个包含各种设计变体的单个字体文件。符号的显示语言为三种样式和四个可调整的可变字体轴（填充、粗细、坡度和光学尺寸）。如需查看完整的 Material 符号集，请参阅 Material Symbols Library。

`FILL` 轴

您可以通过填充功能修改默认图标样式。单个图标同时呈现广告空缺和填充状态

如需传达状态转换，请为动画或互动使用填充轴。值为 0 表示默认值，值为 1 表示已完全填充。以及权重轴上，填充还会影响图标的外观。

`wght` 轴

粗细定义符号的笔触粗细，粗细介于细 (100) 和粗体 (700)。权重也会影响广告素材的总大小符号。

`GRAD` 轴

成绩轴可视化

粗细和坡度会影响符号的粗细。对成绩的调整为比调整权重的方法更精细，并且对符号。

部分文本字体也提供“成绩”。您可以将两个不同级别的年级文字和符号，从而达到和谐的视觉效果。例如，如果文本字体如果成绩值为 -25，则符号可以将其与合适的分值（例如 -25）匹配。

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

低强调度（例如 -25 级）：减少深色上浅色符号的眩光请使用低评分。

高强调度（例如 200 分）：要突出显示某个符号，请增加。

`opsz` 轴

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

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

获取 Material 符号

Material Symbol 有多种格式，适用于不同的开发各类项目和平台设计人员进行模拟或原型设计。

许可

Material 符号位于 Apache License 2.0 版。

浏览和下载各个图标

您可以从 Material 符号库 SVG 或 PNG 格式。它们适用于 Web、Android 和 iOS，或者设计工具。

Git 代码库

通过 git 代码库包含 SVG 格式的完整 Material 符号集。

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

使用 Material 符号

在 Web 中使用

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

这些图标会打包成单一字体，以便网站开发者只需几行代码即可整合这些图标。

使用 Google Fonts 的静态字体

设置图标字体的最简单方法是使用 Google Fonts。添加以下一行 HTML：

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

以上代码段包含每个 axis、替换为重量 400、光学尺寸 48 岁，成绩在 0 和填充（同样为 0。）

使用 Fonts CSS API 来配置不同的轴值。请查看以下示例：

使用 Google Fonts 的可变字体

如果您要通过 CSS 为图标添加动画效果，或者想要对图标功能进行更精细的控制，请使用 Google 符号变量字体。使用范围，格式为 number..number，我们可以加载整个可变字体。结账我能否使用可变字体支持了解您的用户是否能够加载可变字体可能性。下面是一些示例：

甚至以动画形式呈现！

自行托管字体

托管图标字体，以便确定何时更新资源。对于例如，如果网址为 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 来表示图标，而非 。对于其他图标，请使用图标名称的蛇形命名法 （即，用下划线替换空格）。

桌面设备和移动设备的大多数现代浏览器都支持此功能设备。请参阅 Can I Use 连字支持看看您的用户能否处理连字。

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

在 Material 符号库方法是选择任意图标并打开图标字体面板。每种图标字体都有一个 Google Fonts 中的码位索引 git 代码库会显示完整的名称和字符代码集。

在 Material Design 中设置图标样式

这些图标旨在遵循 Material Design 准则使用建议的图标尺寸和颜色时，图片效果最好。样式可让您轻松应用建议的尺寸、颜色和活动状态。

在 Android 中使用

在 Material Symbols 库中，所有图标都是矢量可绘制对象格式。接收者请访问发布商学院 Android Vector Asset Studio 文档。

在 iOS 中使用

这些图标也支持 Apple Symbols 格式。如需详细了解它们请查看官方 Apple Symbols 概览和使用指南。

在 Flutter 中使用

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