Material Design Icons（Material Symbols）

项目简介

Material Design Icons 是 Google 官方维护的 Material 图标资源仓库，包含两套使用相同底层设计的图标集：

• Material Symbols：2022 年 4 月推出的当前版本，基于可变字体技术构建。
• Material Icons：经典图标集，已停止更新，但仍被大量项目使用。

图标遵循 Material Design 设计规范，可在 https://fonts.google.com/icons 在线浏览与检索。

两套图标集对比

Material Symbols（推荐新项目使用）

以可变字体为核心，提供 Outlined、Rounded、Sharp 三种字体，并支持以下设计轴：

• Optical Size（opsz）：20–48px，默认 24
• Weight：100（Thin）–700（Bold），默认 400
• Grade：-50–200，默认 0，负值适合深色背景反色场景
• Fill：0–100，默认 0，可实现填充动画效果

仓库中 symbols 与 variablefont 目录对应 Material Symbols 内容。

Material Icons（经典集）

提供五种风格：Outlined、Filled、Rounded、Sharp、Two tone。仓库中 android、font、ios、png、src 目录对应经典集内容。注意该集自 2022 年起不再新增图标。

使用方式

通过 Google Fonts 引入

Web 项目推荐直接引用 Google Fonts 提供的样式表：

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

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

使用仓库内字体文件

font 与 variablefont 目录包含预生成的字体文件，可直接下载引入项目。

通过 npm 使用

Google 官方自 v3（2016 年）后不再维护 npm 包，社区维护者 @marella 提供了若干自动发布的包（官方未审核）：

• material-symbols：仅 WOFF2 可变字体与 CSS，支持 Sass
• material-icons：WOFF2/WOFF 字体与 CSS，支持 Sass
• @material-design-icons/font：轻量字体包，不支持旧浏览器
• @material-design-icons/svg：仅 SVG，经 SVGO 优化

图标请求与贡献

• 可在 GitHub Issues 中提交图标需求。
• Google 不接受用户提交的成品图标 SVG 或 PR，但欢迎提供参考示例帮助理解需求。
• 出于法律原因，不包含第三方品牌 Logo。

许可协议

图标以 Apache License 2.0 发布，可自由用于商业产品与二次分发，非强制但欢迎在应用「关于」页面标注来源。