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

google/material-design-icons

菜单

Material Icons

相关源文件

Material Icons 是 Google Material Design 系统中的经典图标集。本页面介绍了 Material Design Icons 仓库中 Material Icons 库的功能、结构和用法。有关较新的、基于可变字体的图标集（Material Symbols）的信息，请参阅 Material Symbols。

概述

Material Icons 是 Material Design 的原始图标集，自 2014 年起可用。尽管仍然完全可用，但自 2022 年以来已不再积极更新，因为 Google 已将重点转移到较新的 Material Symbols。Material Icons 由固定样式的图标字体组成，缺乏 Material Symbols 中存在的可变字体功能。

来源： README.md75-98

样式变体

Material Icons 共有五种独特的样式变体，每种都有独立的字体文件

Filled (填充)

实心填充图标的默认样式。这是原始的 Material Icons 样式，在 CSS 中简单地称为“Material Icons”。

描边

一种带轮廓图标的版本，使用较细的线条来定义形状。

Round (圆角)

一种采用圆角和圆边的样式，外观更柔和。

锐利

一种带有锐角的变体，外观更具棱角。

双色调

一种使用两种不同不透明度来创建双色效果的样式。

来源： README.md79-84 font/MaterialIcons-Regular.ttf font/MaterialIconsSharp-Regular.otf font/MaterialIconsRound-Regular.otf

技术实现

Material Icons 主要实现为一组字体文件，每个字形位置（代码点）映射到特定的图标。这允许使用相关字体将图标渲染为文本。

字体文件

Material Icons 分发以下字体文件

  • MaterialIcons-Regular.ttf - 默认填充样式
  • MaterialIconsOutlined-Regular.otf - 轮廓样式
  • MaterialIconsRound-Regular.otf - 圆角样式
  • MaterialIconsSharp-Regular.otf - 锐角样式
  • MaterialIconsTwoTone-Regular.otf - 双色调样式

这些字体将特定的代码点映射到图标设计，允许图标作为字符使用。

码点映射

每个图标名称（如“home”或“search”）都映射到字体中的特定 Unicode 代码点。这使得开发者可以通过使用带有适当 CSS 类的图标名称或直接使用 Unicode 字符来显示图标。

来源： README.md123-135 font/README.md1-27

使用 Material Icons

Material Icons 主要通过 Web 字体来实现，同时也提供特定于平台的实现。

Web 使用

有两种推荐的方法将 Material Icons 包含到 Web 项目中

2. 自托管

从仓库下载字体文件并将其包含在项目中

显示图标

包含字体后，您可以使用适当的 CSS 类和图标名称作为文本来显示图标

对于不同的样式

来源： README.md123-135 font/README.md5-27

Android 实现

Material Icons 可用于 Android，方式为

  • 各种密度的 PNG 文件（mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi）
  • Vector Drawable XML 文件

iOS 实现

对于 iOS 项目，Material Icons 以各种尺寸的图像资源提供。

来源： README.md86-91

与 Material Symbols 的比较

Material Icons 与较新的 Material Symbols 在几个关键方面有所不同

功能Material IconsMaterial Symbols
发布原始集合（2014 年）较新集合（2022 年）
更新状态不再更新积极维护
字体技术标准字体文件可变字体技术
样式文件5个单独的字体文件3 个可变字体文件
粗细变化固定（仅 Regular）可变（100-700）
填充 (Fill)每种样式的固定可变（0-1）
字重不可用可变（-25 至 200）
光学尺寸固定可变（20-48px）
动画不支持通过 CSS 过渡支持

来源： README.md50-73 README.md75-98

仓库组织结构

在仓库中，Material Icons 文件按以下目录结构组织

来源： README.md86-91 font/README.md1-27

NPM 包

尽管 Google 不再正式维护 Material Icons 的 npm 包，但存在社区维护的包，它们会自动更新

  • material-icons：所有样式变体的 WOFF2、WOFF 字体和 CSS
  • @material-design-icons/font：一个更轻量级的版本，仅包含 WOFF2 字体
  • @material-design-icons/svg：包含优化后的图标 SVG

来源： README.md23-49

更新历史

Material Icons 不再进行更新。最后的主要更新是

  • 4.0.0（2020 年 8 月 31 日）：重构仓库，更新资源
  • 3.0.1（2016 年 9 月 1 日）：更改许可证，添加丢失的精灵图
  • 3.0.0（2016 年 8 月 25 日）：许可证更改为 Apache 2.0
  • 2.0（2016 年 5 月 28 日）

来源： README.md100-117

许可证

Material Icons 根据 Apache License Version 2.0 获得许可，允许免费使用、修改和作为产品的一部分进行再分发。

来源： README.md138-141 LICENSE1-202