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

google/material-design-icons

菜单

技术实现

相关源文件

此页面介绍了 Material Design Icons 仓库的技术底层，解释了图标系统是如何在文件和格式级别实现的。它涵盖了字体技术、文件结构以及各种资产如何协同工作以提供图标系统。有关在应用程序中使用图标的信息，请参阅 使用 Material Symbols 和 使用 Material Icons。

字体技术架构

该仓库对图标集采用了两种不同的技术方法

Material Icons 实现

Material Icons 使用传统字体技术，每种样式变体都有单独的文件

  • 每种样式（Regular、Outlined、Round、Sharp、Two-tone）都实现为一个单独的字体文件
  • 文件格式为 TTF 和 OTF
  • 单个文件内没有粗细、渐变或填充变化
  • 字形编码映射将每个图标分配给特定的 Unicode 代码点

来源：README.md74-98 font/MaterialIcons-Regular.ttf font/MaterialIconsSharp-Regular.otf font/MaterialIconsRound-Regular.otf

Material Symbols 实现

Material Symbols 使用现代可变字体技术

  • 三种样式变体（Outlined、Rounded、Sharp）
  • 每种样式都是一个单独的字体文件，其中包含所有变体
  • 四个可变字体轴提供连续变化
    • FILL (0-1)：控制填充级别
    • GRAD (-25 到 200)：控制渐变/粗细对比度
    • opsz (20-48px)：控制光学尺寸
    • wght (100-700)：控制笔画粗细

技术优势包括文件大小更小、连续变化、动画支持以及更精细的控制。

来源：README.md50-73 variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2

字体文件结构

可变字体包含专门的表，支持变体轴

字体文件格式

格式扩展主要用于特性仓库位置
TTF.ttf两个系统基础 TrueType 格式font/ 和 variablefont/
OTF.otfMaterial IconsOpenType，具有附加功能font/
WOFF2.woff2Material Symbols压缩的网络格式（约小 30%）variablefont/

该仓库为 Material Symbols 提供了 TTF 和 WOFF2 格式，建议将 WOFF2 用于 Web 应用程序，因为它具有出色的压缩效果。

来源：variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf, variablefont/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2, font/MaterialIcons-Regular.ttf font/MaterialIconsSharp-Regular.otf font/MaterialIconsRound-Regular.otf

存储库结构

该仓库根据图标系统和格式将资产组织到不同的目录中

由于 Material Symbols（较新技术）和 Material Icons（旧系统）采用不同的技术方法，因此该组织严格地将它们分开。

有关资产组织和文件名约定的详细信息，请参阅 资产组织。

来源：README.md66-98

字形编码系统

图标被映射到私有使用区 (PUA) 的 Unicode 字形编码，以支持基于字体的渲染

.codepoints 文件提供人类可读的图标名称与其 Unicode 字形编码之间的映射。Material Icons 和 Material Symbols 都使用此系统，但它们维护独立的字形编码映射。

有关字形编码如何分配和使用的更多信息，请参阅 字形编码映射。

来源：README.md120-135

文件格式和平台支持

该仓库提供多种格式的图标资产，以支持不同的平台

格式文件扩展名主要用例图标系统位置
TTF.ttf桌面/移动应用两者font/, variablefont/
OTF.otf桌面应用Material Iconsfont/
WOFF2.woff2Web 应用程序Material Symbolsvariablefont/
SVG.svgWeb，设计工具两者symbols/, src/
PNG.png位图图形Material Iconspng/
XML.xmlAndroid 应用Material Iconsandroid/

Material Symbols 主要侧重于基于字体的交付（TTF、WOFF2），以利用可变字体功能，而 Material Icons 由于其旧有状态，具有更广泛的格式支持。

来源：README.md66-98 README.md120-135

更新系统概述

该仓库通过一个更新系统保持最新，该系统从 Google 的图标服务获取新图标

更新系统负责维护仓库的资产，确保跨文件格式的一致性，并生成必要的映射文件。有关更新系统的更多详细信息，请参阅 更新系统。

来源：README.md100-113

图标系统之间的技术差异

两种图标系统代表了不同代的图标技术

功能Material IconsMaterial Symbols
字体技术传统字体可变字体
样式变体5个单独的字体文件3 个可变字体文件
尺寸优化20-24px 主要尺寸20-48px 光学尺寸轴
粗细选项仅 Regular100-700 粗细轴
填充控制单独的填充/轮廓文件0-1 填充轴
渐变控制无-25 到 200 渐变轴
动画有限完整的轴动画支持
文件大小效率较大（多个文件）较小（一个文件，多种变体）
更新状态不再更新积极维护

Material Symbols 在技术上比 Material Icons 有了显著的进步，通过可变字体技术提供了更大的灵活性和更小的文件尺寸。

来源：README.md50-98

许可和实现限制

该仓库在 Apache License Version 2.0 下获得许可，这会影响图标在项目中的技术实现方式

  • 图标可以自由地集成到产品中
  • 无需注明来源（尽管表示感谢）
  • 许可适用于 Material Icons 和 Material Symbols
  • 由于法律限制，不包含第三方徽标

请参阅 LICENSE 文件以了解完整的许可条款。

来源：README.md138-141 LICENSE