本文档提供了使用 Material Icons 的实现指南，它是 Material Design Icons 仓库中的经典图标集。Material Icons 是一个全面的预设计图标集合，包含五种不同的样式。请注意，尽管 Material Icons 仍然完全可用，但自 2022 年初以来已不再积极更新。有关较新的、基于可变字体的图标集的信息，请参阅 Material Symbols。
Material Icons 是 Google 根据 Material Design 指南创建的经典图标集。这些图标针对不同平台上的清晰度和可用性进行了优化，并提供五种不同的样式变体。
来源: README.md75-98 font/README.md1-27
Material Icons 有五种不同的视觉风格，每种风格都能满足不同的设计需求
| 风格 | 描述 | 字体系列 |
|---|---|---|
| Filled | 实心图标（默认样式） | Material Icons |
| 描边 | 带轮廓的图标 | Material Icons Outlined |
| Round | 带有圆角的图标 | Material Icons Round |
| 锐利 | 带有尖锐、直线边缘的图标 | Material Icons Sharp |
| 双色调 | 使用两种不同不透明度的图标 | Material Icons Two Tone |
来源: README.md79-84 font/README.md7-26
使用 Material Icons 最简单且推荐的方式是链接到 Google Fonts 上托管的 Web 字体
来源: font/README.md5-27 README.md126-134
或者，您可以从仓库中的 /font 目录自托管字体文件。这对于离线应用程序或互联网访问受限的环境可能是必需的。
来源: README.md123-134 font/README.md1-27
包含字体后，您可以使用简单的结构在 HTML 中使用 Material Icons
标签之间的文本是图标名称（例如，“face”）。您可以在仓库的 codepoints 文件中找到所有可用的图标名称。
来源: font/MaterialIcons-Regular.codepoints1-1324 font/MaterialIconsOutlined-Regular.codepoints1-1490 font/MaterialIconsRound-Regular.codepoints1-1612 font/MaterialIconsSharp-Regular.codepoints1-1316
可以使用标准的 CSS 属性对 Material Icons 进行样式设置。以下是一个常见样式的示例
来源: README.md126-134
Material Icons 的设计尺寸是特定的。字体通过 font-size 属性自动以正确尺寸渲染图标
| 尺寸名称 | 尺寸 (px) | CSS 类 |
|---|---|---|
| 小型 | 18px | .material-icons.md-18 |
| 默认 | 24像素 | .material-icons.md-24 |
| 中等 | 36px | .material-icons.md-36 |
| 大型 | 48px | .material-icons.md-48 |
对于 Android 项目，Material Icons 可作为矢量可绘制资源在仓库的 /android 目录中找到。您可以将这些 XML 文件直接导入到您的 Android 项目中。
来源: README.md87-91
对于 iOS 项目，Material Icons 资源可在仓库的 /ios 目录中找到。这些可以导入到您的 iOS 项目中并与 UIImage 一起使用。
来源: README.md87-91
Material Icons 的完整集合可以在 fonts.google.com/icons 上以更友好的方式浏览。请确保从下拉菜单中选择“Material Icons”（而不是“Material Symbols”）。
您还可以在仓库中的 .codepoints 文件中找到图标名称的完整列表，这些文件将图标名称映射到它们的 Unicode codepoints
face e87c
favorite e87d
favorite_border e87e
feedback e87f
...
来源: README.md77 font/MaterialIcons-Regular.codepoints1-1324
虽然 Google 不维护 Material Icons v3 (2016) 之后的官方 npm 包，但有社区维护的可用包
| 包 | 描述 | 链接 |
|---|---|---|
| material-icons | WOFF2、WOFF 字体和带 Sass 支持的 CSS | npm |
| @material-design-icons/font | 更轻量级的包，只有 WOFF2 字体 | npm |
| @material-design-icons/svg | 仅 SVG 包 | npm |
来源: README.md23-49
Material Icons 在 Apache License 2.0 下可用。您可以自由地在您的产品中使用、修改和分享这些图标。
来源: README.md138-141 LICENSE2-202
由于 Material Icons 自 2022 年初以来已不再更新，请考虑在新项目中改用 Material Symbols。Material Symbols 通过可变字体技术提供了更大的灵活性，允许自定义字重、填充、等级和光学尺寸。有关更多信息，请参阅 Material Symbols。