在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

google/material-design-icons

菜单

使用 Material Symbols

相关源文件

本页面提供了在 Web、Android 和 iOS 项目中使用 Material Symbols 的全面实现指南。Material Symbols 是 Google 目前基于可变字体技术构建的图标系统，通过可调参数提供广泛的自定义选项。

有关 Material Symbols 可变字体背后技术的信息，请参阅 可变字体技术。要了解可用的不同样式变体，请参阅 样式变体。

1. Material Symbols 概述

Material Symbols 是 Google 取代经典 Material Icons 的当前图标系统。Material Symbols 基于可变字体技术构建，为您的项目实现图标提供了更灵活、更高效的方式。

Material Symbols 的主要特点

  • 三种样式变体：Outlined（描边）、Rounded（圆角）和 Sharp（锐利）
  • 四种可自定义的轴：fill（填充）、weight（粗细）、grade（字重）、optical size（光学尺寸）
  • 提供 Web 字体和可下载资源
  • 比 Material Icons 文件大小更高效
  • 支持连续变化和动画

来源： README.md50-74

来源： README.md50-74

2. 集成 Material Symbols

根据您的平台和具体需求，有多种方法可以将 Material Symbols 集成到您的项目中。

来源： README.md120-135

2.1 Web 实现

在 Web 项目中实现 Material Symbols 的推荐方法是通过 Google Fonts CDN。

使用 Google Fonts CDN

  1. 在 HTML 中添加链接
  1. 在 HTML 中使用图标
  1. 使用 CSS 变量进行自定义

您可以通过更改字体系列来选择三种不同的字体样式

  • material-symbols-outlined
  • material-symbols-rounded
  • material-symbols-sharp

来源： README.md120-135

自托管字体文件

如果您需要自托管字体文件，可以从存储库下载它们并将其包含在项目中

  1. 从 /variablefont 目录下载字体文件
  2. 在 CSS 中使用 @font-face 将它们包含在您的项目中
  3. 应用与 CDN 方法相同的用法模式

来源： README.md120-135 variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints:1-1100

2.2 Android 实现

在 Android 项目中实现 Material Symbols

  1. 下载 Material Symbols 字体文件或使用 Android 特定的资源
  2. 将字体文件放置在项目的 res/font/ 目录中
  3. 在 XML 布局中或以编程方式使用图标

XML 用法示例

对于以编程方式使用，您可以从 codepoints 文件中通过其 Unicode codepoint 来引用图标。

来源： variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints:1-1100

2.3 iOS 实现

在 iOS 项目中实现 Material Symbols

  1. 下载 Material Symbols 字体文件
  2. 将字体文件添加到 Xcode 项目中，并确保它们包含在应用程序包中
  3. 在 Info.plist 中注册字体
  4. 创建 UIFont 扩展以使用 Material Symbols 字体

Swift 实现示例

来源： variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints:1-1100

3. 自定义 Material Symbols

Material Symbols 的主要优势之一是能够通过四种可变字体轴来自定义图标。

来源： README.md60-64

3.1 字体变体设置

在 Web 项目中，您可以使用 CSS font-variation-settings 来自定义 Material Symbols

轴范围默认描述
FILL（填充）0-100 为描边，1 为填充
WGHT（粗细）100-700400从细（100）到粗（700）
GRAD（字重）-25 到 2000控制精细的视觉细节
OPSZ（光学尺寸）20-4824光学尺寸优化

不同变体的 CSS 示例

来源： README.md60-64

3.2 动画图标

Material Symbols 的可变字体技术支持使用 CSS 过渡实现流畅的图标动画

这会在悬停时创建从描边、正常粗细图标到填充、粗体图标的平滑过渡。

来源： README.md57-58

4. 图标参考和选择

Material Symbols 包含数千个图标，每个图标都有唯一的名称和 Unicode codepoint。您可以在 Google Fonts 网站上浏览这些图标，或在 codepoints 文件中参考。

来源： README.md5 variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints:1-1100, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].codepoints:1-1100, variablefont/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].codepoints:1-1100

4.1 查找图标 Codepoint

Material Symbols 中的每个图标都有一个名称和相应的 Unicode codepoint。您可以在存储库的 .codepoints 文件中找到它们

icon_name e123

其中 icon_name 是图标的名称（用于 CSS 类和 HTML），而 e123 是 Unicode codepoint（用于原生实现）。

例如，从 codepoints 文件

search e8b6
home e9b2
settings f013

来源： variablefont/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].codepoints:1-1100

5. 使用 Material Symbols 的最佳实践

5.1 性能考虑

  • 在 Web 项目中，尽可能使用 Google Fonts CDN
  • 为您的设计选择合适的样式变体
  • 在原生实现中，仅包含您需要的图标
  • 考虑在 Web 中使用 WOFF2 格式以减小文件大小

5.2 可访问性

  • 确保图标与背景之间有适当的对比度
  • 为图标使用适当的大小（建议最小 18px）
  • 为重要操作添加文本标签
  • 为传达含义的图标提供 alt 文本或 ARIA 标签

5.3 一致性

在整个应用程序中保持图标使用的一致性

  • 始终使用相同的样式变体
  • 保持相对于其他 UI 元素的大小一致
  • 对相关图标应用相似的自定义设置
  • 考虑为常见图标变体创建 CSS 类

一致性类的示例

来源： README.md50-74

6. 故障排除

常见问题及解决方案

问题解决方案
图标未显示验证字体是否已正确加载，以及类名是否正确
图标显示为方块检查图标名称是否正确以及字体是否已加载
图标外观错误确保您的 font-variation-settings 已正确指定
大小不一致使用一致的 font-size 设置，并考虑 opsz 轴
性能问题使用 WOFF2 格式，并且仅加载所需的图标样式

来源： README.md50-74 README.md120-135

7. 许可

Material Symbols 与所有 Material Design Icons 一样，均根据 Apache License Version 2.0 提供。您可以在您的产品中自由使用它们，但在应用程序的关于屏幕中注明来源将不胜感激（但非必需）。

来源： LICENSE1-202 README.md138-141