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

google/material-design-icons

菜单

Material Icons 对比 Material Symbols

相关源文件

本页面解释了 Material Design Icons 仓库中提供的两个图标集——Material Icons 和 Material Symbols 之间的主要区别。内容涵盖了技术差异、字体技术、自定义能力和使用注意事项，以帮助开发者根据自身需求选择合适的图标系统。有关实现细节，请参阅 使用 Material Symbols 和 使用 Material Icons。

图标集概述

Google 在此仓库中维护着两个不同的图标集：

  1. Material Icons：经典的、旧的图标集（自 2022 年起不再更新）
  2. Material Symbols：当前的、积极维护的图标集（于 2022 年 4 月推出）

两个图标集共享相同的底层设计，但使用了不同的字体技术，提供了不同的功能和灵活性。

来源：README.md3-5 README.md50-53 README.md75-78

技术对比

字体技术

两个图标集最根本的区别在于所使用的字体技术

Material Icons 使用传统的字体技术，每个样式变体都有单独的字体文件；而 Material Symbols 使用可变字体技术，允许在单个字体文件中沿多个设计轴进行连续变化。

来源：README.md75-98 README.md50-74 variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:60-65

样式变体

Material IconsMaterial Symbols
填充 (Filled)描边 (Outlined, FILL=1)
描边描边 (Outlined, FILL=0)
圆形 (Round)圆角
锐利锐利
双色调不可用

Material Icons 包含 Material Symbols 中不存在的“双色调”样式。反之，Material Symbols 可以通过调整 FILL 参数来生成任何样式的填充版本。

来源：README.md79-84 README.md55-58

自定义参数

Material Symbols 提供了四个可自定义的设计轴：

参数范围默认描述
FILL（填充）0-10控制图标是填充（1）还是描边（0）
GRAD（字重/梯度）-25 到 2000控制“字重”或粗细；-25 适用于深色主题
opsz（光学尺寸）20-48像素24为不同显示尺寸调整光学尺寸
wght（字重）100-700400控制字体粗细，从细（100）到粗（700）

Material Icons 不提供这些自定义参数——每个样式都是固定的。

来源：README.md60-64 variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf:60-64

目录结构和文件组织

该仓库将两个图标集组织在不同的目录中：

字体文件

  • Material Icons 字体文件存储在 font 目录下（例如，MaterialIcons-Regular.ttf）
  • Material Symbols 可变字体文件存储在 variablefont 目录下（例如，MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf）

Material Symbols 文件的命名约定包含方括号中的四个可变轴。

来源：README.md66-69 README.md86-91 font/MaterialIcons-Regular.ttf variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf

使用考量

何时使用 Material Icons

  • 对于需要稳定、不变的图标集的项目
  • 当您需要双色调样式时（Material Symbols 中没有）
  • 为了兼容不支持可变字体的旧系统
  • 当您需要更小的文件大小时（如果只使用单一样式）

何时使用 Material Symbols

  • 对于新项目（推荐）
  • 当您需要通过可调参数获得设计灵活性时
  • 为了更现代、更具适应性的外观
  • 当您需要为图标属性（如填充）设置动画时
  • 当您希望更精细地控制字重、光学尺寸和字形级别时

来源：README.md70-74 README.md93-98

实现差异

Web 端使用

对于 Web 应用程序，实现方法有所不同。

Material Icons

Material Symbols

关键区别在于可以使用 font-variation-settings 属性配合 Material Symbols 来自定义外观。

来源：README.md126-134

总结对比

功能Material IconsMaterial Symbols
状态旧版，未更新当前，积极维护
技术传统字体可变字体
样式变体5 种独立样式3 种基础样式，可变填充
定制固定设计4 个可调参数
字重选项仅常规100-700（连续）
光学尺寸固定20-48px（可调）
字形级别控制否是（-25 至 200）
填充动画否是
双色调选项是否
目录font, android, ios 等symbols, variablefont
文件大小效率需要多个文件更少文件，更多选项

来源：README.md50-98

最终选择 Material Icons 还是 Material Symbols 取决于您的项目需求。对于大多数新项目，Material Symbols 提供了更大的灵活性并且正在积极维护，因此是推荐的选择，除非您特别需要 Material Icons 中才有的功能。