Material Symbols / Material Icons

这是 Google 提供的两套不同的官方图标集，但使用相同的底层设计。Material Symbols 是当前图标集，于 2022 年 4 月推出，基于可变字体技术构建。Material Icons 是经典图标集，但已停止更新。更多详情请见下文。

您可以通过 https://fonts.google.com/icons 以更方便用户的方式浏览图标。使用左上角附近的下拉菜单在两套图标集之间进行选择；Material Symbols 是默认图标集。

图标设计遵循 Material Design 指南。

图标请求

我们很乐意满足您的图标需求！请在 GitHub 上以 Issue 的形式提交您的请求。

请注意，Google Fonts 不接受用户提交的已完成图标设计！Material 图标有相当严格的指南，而且 Google 拥有生成此代码库的上游源文件。因此，Google 不接受图标文件的拉取请求（无论是新图标建议，还是现有图标的修复）。欢迎提供概念，但请勿设计 SVG 文件并通过拉取请求提交。

但是，我们非常欢迎用户引用外部文件或图片作为示例——例如他们想要的内容，但不会“照搬”。如果您为单个图标提供多个示例，则效果会更好，这有助于我们理解该想法的“精髓”。

例如，“无性别”有一个相当通用的概念徽标/图标，因此，如果您建议 Google 在 Material 样式中添加无性别图标，请提及该图标，或指向 https://www.google.com/search?q=agender+icon 会是一个有用的提示。

第三方徽标

目前，由于法律原因，Google 未在 Material 符号或 Material 图标中包含第三方徽标。过去包含的一些第三方徽标现已被移除。

npm 软件包

Google 目前不维护此代码库（v3 及以上版本，2016 年）的 npm 软件包。但是，用户 @marella 托管了以下内容。他告诉我们，这些软件包会使用 GitHub Actions 自动更新和发布。注意：Google 不监控或审查这些软件包。

material-symbols

• Material Symbols 仅支持 WOFF2 可变字体和 CSS
• 包含轮廓、圆角和锐化图标，以及所有填充、粗细、等级和视觉尺寸的变体
• 支持 Sass

material-icons

• 仅支持 WOFF2、WOFF 字体和 CSS
• 包含轮廓、圆形、锐利和双色图标
• 支持 Sass

@material-design-icons/font

• 仅支持 WOFF2 字体和 CSS
• material-icons 包的精简版本
• 由于放弃了 WOFF (v1)，因此不支持 Internet Explorer 等 旧版浏览器

@material-design-icons/svg

• 仅限 SVG
• 使用 SVGO 优化 SVG

Material Symbols

您可以通过 https://fonts.google.com/icons 以更方便用户的方式浏览这些新图标。使用左上角附近的下拉菜单在两套图标之间进行选择；默认图标为 Material Symbols。

这些图标最初是作为可变字体构建/设计的（基于 Material Icons 的 24 像素设计）。Material Symbols 提供三种独立的可变字体，也提供静态图标（但并非所有可用的变体，因为那样会有数百种样式）：

• 轮廓
• 圆角
• 锐角
• 请注意，虽然没有单独的填充字体，但填充轴允许访问所有三种字体的填充样式。它还可以被操纵以产生动画填充效果，以指示用户的选择。

每种字体都有以下设计轴，可以在 CSS 或许多更现代的设计应用程序中进行更改：

• 光学尺寸 (opsz)，范围从 20 到 48 像素。默认值为 24。
• 粗细范围：100（细）到 700（粗体）。常规为 400。
• 渐变范围：-50 到 200。默认值为 0（零）。建议使用 -50 来反转对比度（例如，黑色背景上的白色图标）。
• 填充范围：0 到 100。默认值为 0（零）。

此代码库中的以下目录包含 Material Symbols（而非 Material Icons）内容：

• 符号
• 可变字体

Material Symbols 目前不支持哪些功能？

• 只有 20 像素和 24 像素版本采用完美的像素网格对齐设计
• 唯一的预制字体是可变字体
• 没有双色图标

Material Icons

您可以通过 https://fonts.google.com/icons?icon.set=Material+Icons 以更方便用户的方式浏览图标。

这些经典图标提供五种不同的样式：

• 轮廓
• 填充（字体版本简称为 Material Icons，因为这是最早的样式）
• 圆角
• 锐角
• 双色

此代码库中的以下目录专门包含 Material Icons（而非 Material Symbols）内容：

• android
• 字体
• ios
• png
• src

Material Icons 目前不支持哪些功能？

• 可变字体
• 除常规字体外的其他粗细
• 除常规字体外的其他等级
• 填充过渡动画
• 新图标（自 2022 年停止更新以来）

Material Icons 更新历史

4.0.0 更新

• 2020 年 8 月 31 日
• 重构代码库，更新资源。

3.0.1 更新

• 2016 年 9 月 1 日
• 更改了 package.json 中的许可证。
• 添加了缺失的设备符号精灵。

3.0.0 更新

• 2016 年 8 月 25 日
• 许可证变更为 Apache 2.0！

2.0

• 2016 年 5 月 28 日

入门

阅读开发者指南，了解如何在项目中使用 Material Design 图标。

使用字体

“font”和“variablefont”文件夹包含预生成的字体文件，可将其添加到项目中。这对于 Web 应用来说尤其方便；不过，通常情况下，最好链接到 Google Fonts 上托管的网络字体：

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

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

在 Google Fonts 开发者指南中了解更多关于 Material Symbols 或 Material Icons 的信息。

许可证

我们已将这些图标提供给您在 Apache 许可证 2.0 版 下使用，以便您将其集成到您的产品中。欢迎您随意在您的产品中重新组合和重新分享这些图标和文档。
我们希望您在应用的“关于”页面中注明来源，但这不是强制性的。