本文档介绍了 Material Design Icons 仓库内图标资源的组织方式。它解释了 Material Symbols 和 Material Icons 集合的目录结构、命名约定和文件格式。有关字体文件的技术细节,请参阅 字体文件。有关图标如何映射到代码点的信息,请参阅 代码点映射。
该仓库将资源组织成两个具有独立目录结构的图标集
Material Symbols 目录:
symbols/:包含 Material Symbols 的 SVG 表示形式variablefont/:包含 Material Symbols 的可变字体文件Material Icons 目录:
android/:包含 Android 特定的资源(PNG 和 XML 矢量可绘制对象)font/:包含 Material Icons 的字体文件ios/:包含 iOS 特定的资源png/:包含 Material Icons 的 PNG 图像src/:包含源文件来源:README.md66-69 README.md86-92
Material Symbols 可变字体按样式和格式进行组织
Android 资产遵循分层组织结构
示例路径:android/alert/notification_important/materialicons/black/res/drawable-xxxhdpi/baseline_notification_important_black_24.png
来源:android/alert/notification_important/materialicons/black/res/drawable-xxxhdpi/baseline_notification_important_black_24.png android/alert/notification_important/materialiconsoutlined/black/res/drawable-mdpi/outline_notification_important_black_20.png android/alert/notification_important/materialiconsround/black/res/drawable-xhdpi/round_notification_important_black_18.png
Android 资源提供多种像素密度,以支持不同的设备屏幕
| 密度限定符 | 比例因子 | 目录 |
|---|---|---|
| mdpi | 1.0x | drawable-mdpi/ |
| hdpi | 1.5x | drawable-hdpi/ |
| xhdpi | 2.0x | drawable-xhdpi/ |
| xxhdpi | 3.0x | drawable-xxhdpi/ |
| xxxhdpi | 4.0x | drawable-xxxhdpi/ |
来源:android/alert/notification_important/materialiconsoutlined/black/res/drawable-mdpi/outline_notification_important_black_20.png android/alert/notification_important/materialiconsround/black/res/drawable-hdpi/round_notification_important_black_18.png android/alert/notification_important/materialiconsround/black/res/drawable-xhdpi/round_notification_important_black_18.png android/alert/notification_important/materialicons/black/res/drawable-xhdpi/baseline_notification_important_black_48.png android/alert/notification_important/materialicons/black/res/drawable-xxxhdpi/baseline_notification_important_black_24.png
Material Symbols 和 Material Icons 均提供不同的样式变体
| 图标集 | 可用样式 |
|---|---|
| Material Symbols | Outlined, Rounded, Sharp |
| Material Icons | Filled (Material Icons), Outlined, Rounded, Sharp, Two-tone |
来源:README.md52-58 README.md79-84
Material Symbols 可变字体文件的命名模式如下:MaterialSymbols<Style>[-<Variation>].<format>
其中
<Style>:样式名称(“Outlined”、“Rounded”、“Sharp”)<Variation>:可选的变体说明符<format>:文件格式(“ttf”或“woff2”)示例:MaterialSymbolsOutlined.woff2
Material Icons 字体文件的命名模式如下:MaterialIcons<Style>-Regular.<format>
其中
<Style>:样式名称(“” “Outlined”、“Round”、“Sharp”、“TwoTone”)<format>:文件格式(“ttf”或“otf”)示例:MaterialIconsOutlined-Regular.otf
来源:README.md52-58 README.md79-84
下表总结了每个图标集的可用格式
| 图标集 | 可用格式 |
|---|---|
| Material Symbols | 可变字体(TTF、WOFF2)、SVG |
| Material Icons | 字体(TTF、OTF)、SVG、PNG、Android XML、iOS 资源 |
每种格式服务于不同的用例
来源:README.md66-69 README.md86-92 README.md123-135
图标提供多种尺寸
| 大小 | 描述 |
|---|---|
| 18dp | 用于密集 UI 的小尺寸 |
| 20dp | 另一种小尺寸 |
| 24dp | 标准尺寸(最常用) |
| 36dp | 中等尺寸 |
| 48dp | 大尺寸 |
对于 Material Symbols,尺寸由可变字体中的光学尺寸(opsz)轴控制,范围为 20px 到 48px。
来源: android/alert/notification_important/materialiconsround/black/res/drawable-xhdpi/round_notification_important_black_18.png android/alert/notification_important/materialiconsround/black/res/drawable-hdpi/round_notification_important_black_20.png android/alert/notification_important/materialicons/black/res/drawable-xxxhdpi/baseline_notification_important_black_24.png android/alert/notification_important/materialicons/black/res/drawable-xhdpi/baseline_notification_important_black_48.png README.md61-64