跳到内容

google/material-design-icons

材质符号/材质图标

这是来自谷歌的两个不同的官方图标集,使用相同的底层设计。Material Symbols是当前的一套,于2022年4月推出,基于可变字体技术。“材质图标”是经典设置,但不再更新。以下是更多详细信息。

可以通过以下网址以更人性化的方式浏览图标https://fonts.google.com/icons.使用左上角的弹出菜单在两个集合之间进行选择;默认为“材质符号”。

图标设计在材料设计指南.

图标请求

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

请注意,谷歌字体不接受用户提交完成的图标设计!有相当严格的材料图标指南,加上谷歌有上游源文件,从中生成此回购。因此,谷歌不接受图标文件的请求(无论是新图标建议,还是现有图标的修复)。概念很受欢迎,只是不要设计SVG并通过pull请求提交它们。

然而,我们非常欢迎用户以外部文件或图像为例——以他们想要的东西为例,但他们不会被“照原样”接受。如果您有多个单个图标的示例,这一点尤其有效,可以帮助我们理解想法的“本质”。

例如,“agender”有一个相当通用的概念性徽标/图标,因此如果你建议谷歌在Material样式中添加agender图标,可以提及,也可以指向https://www.google.com/search?q=agender+图标这将是一个有用的提示。

第三方标志

目前,由于法律原因,谷歌在材料符号或材料图标中不包括第三方徽标。一些过去包含的第三方标志已被删除。

npm软件包

谷歌目前没有为此次回购维护npm套餐,超过v3(2016)。然而,用户@marella正在托管以下内容。他告诉我们这些是使用GitHub Actions自动更新和发布的。注意:谷歌是这样做的监控或审查这些包裹。

  • 仅WOFF2可变字体和CSS用于材质符号
  • 包括轮廓、圆形和尖锐图标以及填充、重量、等级和光学尺寸的所有变化
  • 支持Sass
  • 仅WOFF2、WOFF字体和CSS
  • 包括轮廓图标、圆形图标、锐利图标和双色图标
  • 支持Sass
  • 仅WOFF2字体和CSS
  • 较轻版本的材料-图标包裹
  • 不支持较旧的浏览器例如Internet Explorer,因为删除了WOFF(v1)
  • 仅SVG
  • 使用SVGO优化SVG

材料符号

这些较新的图标可以通过更人性化的方式浏览https://fonts.google.com/icons.使用左上角的弹出菜单在两个集合之间进行选择;默认为“材质符号”。

这些图标首先被构建/设计为可变字体(基于材质图标的24像素设计)。有三种单独的材质符号变量字体,它们也有可用的静态图标(但这些字体没有所有可用的变体,因为可能有数百种样式):

  • 轮廓
  • 四舍五入
  • 夏普
  • 请注意,尽管没有单独的填充字体,但填充轴允许访问所有三种字体的填充样式。还可以对其进行动画填充效果操作,以指示用户选择。

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

  • 光学尺寸(opsz)从20到48像素。默认值为24。
  • 重量从100(细)到700(粗)。常规是400。
  • 等级从-50到200。默认值为0(零)-建议使用50进行反向对比(例如,黑色背景上的白色图标)
  • 从0填充到100。默认值为0(零)。

本回购中的以下目录专门包含“材质符号”(而非“材质图标”)内容:

  • 符号
  • 可变字体

当前是什么在材料符号中可用?

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

材质图标

可以通过以下网址以更人性化的方式浏览图标https://fonts.google.com/icons?icon.set=材料+图标

这些经典图标有五种不同的样式:

  • 轮廓
  • 填充(字体版本称为材质图标,因为这是最古老的样式)
  • 四舍五入
  • 夏普
  • 双音

此回购中的以下目录包含特定的“材质图标”(而非“材质符号”)内容:

  • 安卓
  • 字体
  • 网间网操作系统
  • png公司
  • 型钢混凝土

当前是什么在“材质图标”中可用?

  • 可变字体
  • 常规重量以外的重量
  • 常规以外的等级
  • 设置填充过渡动画的方法
  • 新图标(自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

  • 2016年5月28日

入门

阅读开发人员指南介绍如何在项目中使用材质设计图标。

使用字体

这个字体可变字体文件夹包含可以包含在项目中的预先生成的字体文件。这对网络来说特别方便;然而,通常最好链接到谷歌字体上的网络字体:

<链接 href公司="https://fonts.googleapis.com/css2?family=材料+图标"相对="样式表">
<链接 href公司="https://fonts.googleapis.com/css2?family=材料+符号+轮廓"相对="样式表">

阅读更多材料符号材质图标在谷歌字体开发者指南中。

许可证

我们已经为您提供了这些图标,以便您在Apache许可证2.0版。请随意在您的产品中重新混合和共享这些图标和文档。我们希望在你的应用程序中添加属性关于屏幕,但这不是必需的。