material design icons

材质符号/材质图标

这是来自 Google 的两个不同的官方图标集，使用相同的底层设计。 Material Symbols 是当前的一套，于 2022 年 4 月推出，基于可变字体技术。 Material Icons 是经典的集合，但不再更新。更多详细信息如下。

可以在 https://fonts.google.com/icons 上以更用户友好的方式浏览图标。使用左上角附近的下拉菜单在两组之间进行选择；材料符号是默认值。

图标是根据材料设计指南设计的。

图标请求

我们很乐意支持您的图标需求！请在 GitHub 上将您的请求作为问题提交。

请注意，Google Fonts 不接受用户提交的成品图标设计！对于 Material 图标有相当严格的指导方针，而且 Google 有生成此存储库的上游源文件。因此，Google 不接受图标文件的拉取请求（无论是新图标建议还是现有图标修复）。概念受到赞赏——只是不要设计 SVG 并通过拉取请求提交它们。

然而，我们非常欢迎用户指出外部文件或图像作为他们想要的示例，但它们不会只是“按原样”获取。如果您有一个图标的多个示例，这尤其有效，可以帮助我们理解该想法的“本质”。

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

第三方徽标

目前，由于法律原因，Google 并未在 Material Symbols 或 Material Icons 中包含第三方徽标。过去包含的一些第三方徽标已被删除。

npm 包

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

物质符号

• 仅适用于材质符号的 WOFF2 可变字体和 CSS
• 包括轮廓、圆形和尖锐图标以及填充、重量、等级和光学尺寸的所有变化
• 支持 Sass

材料图标

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

@material-design-icons/字体

• 仅 WOFF2 字体和 CSS
• material-icons包的轻量版
• 由于删除了 WOFF (v1)，因此不支持 Internet Explorer 等旧版浏览器

@material-design-icons/svg

• 仅 SVG
• 使用 SVGO 优化 SVG

材料符号

这些较新的图标可以在 https://fonts.google.com/icons 上以更用户友好的方式浏览。使用左上角附近的下拉菜单在两组之间进行选择；材料符号是默认值。

这些图标首先被构建/设计为可变字体（基于 Material Icons 的 24 px 设计）。共有三种单独的材质符号可变字体，它们也有可用的静态图标（但它们不具有所有可用的变体，因为这将有数百种样式）：

• 概述
• 圆形
• 锋利的
• 请注意，虽然没有单独的填充字体，但填充轴允许访问所有三种字体的填充样式。还可以对其进行操作以获得动画填充效果，以指示用户选择。

每种字体都有这些设计轴，这些设计轴在 CSS 或许多更现代的设计应用程序中可以有所不同：

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

此存储库中的以下目录专门包含材质符号（不是材质图标）内容：

• 符号
• 可变字体

材质符号中目前不提供哪些内容？

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

材质图标

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

这些经典图标有五种不同的风格：

• 概述
• Filled（字体版本称为 Material Icons，因为这是最古老的样式）
• 圆形
• 锋利的
• 二音

此存储库中的以下目录专门包含材质图标（不是材质符号）内容：

• 安卓
• 字体
• IOS
• PNG
• 源代码

Material Icons 目前不提供哪些功能？

• 可变字体
• 常规重量以外的重量
• 常规成绩以外的成绩
• 一种动画填充过渡的方法
• 新图标（自 2022 年停止更新以来）

材质图标更新历史

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日

入门

阅读开发人员指南，了解如何在项目中使用材料设计图标。

使用字体

font和variablefont文件夹包含可以包含在项目中的预先生成的字体文件。这对于网络来说尤其方便；但是，通常最好链接到 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 向您提供这些图标，以便将其合并到您的产品中。请随意在您的产品中重新混合和重新共享这些图标和文档。我们希望在您的应用程序的“关于”屏幕中显示归属信息，但这不是必需的。