在数字世界的广阔画布上，图标扮演着至关重要的角色，它们是用户界面的无声语言，指引着用户、传达着信息，并塑造着整体的视觉体验。而由谷歌推出的 Material Design 图标，无疑是这一领域内的重要里程碑，它不仅提供了一套美观、一致的视觉符号，更代表着一套严谨而富有表现力的设计哲学。本文将带您深入了解谷歌 Material Design 图标的演进与核心，特别是其两大支柱——经典的 Material Icons 和革新的 Material Symbols。
Material Design：统一视觉语言的追求
Material Design 是谷歌于2014年推出的一套设计系统，旨在为所有数字平台提供统一的用户体验。它的核心理念在于模拟现实世界的物理材质，通过光影、运动和触感等元素，创造直观且富有层次感的界面。Material Design 图标正是这一理念的视觉延伸，它们的设计遵循严格的网格系统和几何原则，确保无论在何种尺寸或背景下，都能保持清晰度和辨识度。
两大基石：Material Symbols 与 Material Icons
随着设计趋势和技术能力的不断发展，Material Design 图标也在持续演进。目前，该项目主要包含两个主要的图标系列： Material Symbols 和 Material Icons。
Material Symbols：活力的可变字体图标
Material Symbols 是谷歌图标家族中的新一代成员，于2022年4月正式推出。它代表着图标技术的一次重大飞跃，将可变字体（Variable Font）技术应用于图标设计中，极大地增强了图标的灵活性和可定制性。
核心特点与无限可能：
- 可变字体技术：与传统的静态图标不同，Material Symbols 并非一系列预设的图片文件。它以可变字体文件的形式存在，这意味着开发者和设计师可以通过调整一系列“设计轴”，实现图标外观的动态变化。
- 多重样式：Material Symbols 提供三种主要的视觉样式：
- Outlined (轮廓)：简洁的线条勾勒出图标的形态。
- Rounded (圆角)：柔和的圆角处理，赋予图标亲切感。
- Sharp (锐利)：边缘分明，带来更清晰、现代的视觉效果。
- 可定制的设计轴：Material Symbols 的强大之处在于其四个可调节的设计轴，让您可以精细地控制图标的视觉表现：
- Optical Size (光学尺寸)：从 20 到 48 像素，可根据图标的实际显示尺寸进行调整，确保在不同大小下都有最佳的视觉平衡。默认值为 24。
- Weight (字重)：从 100（纤细）到 700（粗体），允许您调整图标线条的粗细。常规字重为 400。
- Grade (等级)：从 -50 到 200，用于微调图标的视觉重量和对比度。默认值为 0，-50 适用于反转对比度（例如，深色背景上的白色图标）。
- Fill (填充)：从 0 到 100，控制图标的填充程度。默认值为 0，通过调整此值可以实现图标的填充或轮廓切换，甚至创造平滑的填充动画效果，以响应用户交互或表示选中状态。
浏览与集成： 您可以在 Google Fonts 网站 (https://fonts.google.com/icons) 上方便地浏览 Material Symbols。该网站默认展示 Material Symbols，并通过下拉菜单轻松切换不同系列。在项目中集成时，可以引用 Google Fonts 提供的 CSS 链接，例如：
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
当前局限： 尽管 Material Symbols 提供了巨大的灵活性，但目前也存在一些特定的限制。例如，只有 20 和 24 像素的图标是经过像素完美设计的；同时，目前并没有提供独立的“填充”字体（因为填充效果可以通过“Fill”轴实现），也不支持“双色调”风格。
Material Icons：经典的遗产与发展
Material Icons 是 Material Design 图标的经典系列，承载着项目早期的大部分历史。它为数字产品提供了丰富的、经过验证的视觉符号，在很长一段时间内都是许多界面设计的标准选择。
风格与历史： Material Icons 提供五种独特的视觉风格，以满足不同设计场景的需求：
- Outlined (轮廓)
- Filled (填充)：这是 Material Icons 最早、最经典的风格，字体文件通常直接命名为“Material Icons”。
- Rounded (圆角)
- Sharp (锐利)
- Two tone (双色调)：一种独特的风格，利用两种颜色来区分图标的元素，增加视觉层次感。
更新现状与局限： 随着 Material Symbols 的推出，Material Icons 系列已于 2022年停止更新。这意味着，您将不会在该系列中找到最新的图标或设计趋势。因此，如果您的项目需要最新的视觉元素或高度可定制性，Material Symbols 将是更优的选择。
同时，由于 Material Icons 是基于静态字体文件，它不具备 Material Symbols 的可变性。这意味着您无法调整图标的字重、等级，也无法实现填充动画等高级效果。
如何获取与集成 Material Design 图标
将 Material Design 图标集成到您的项目中，有多种便捷的方式，无论您是前端开发者还是移动应用设计师。
npm 包（社区维护）
尽管谷歌官方自 Material Icons v3 (2016年) 后便不再直接维护 Material Design 图标的 npm 包，但社区成员 @marella 积极提供了几个高质量的、自动更新的 npm 包。这些包通过 GitHub Actions 自动化发布，极大地简化了图标在 JavaScript/TypeScript 项目中的使用：
material-symbols：专注于 Material Symbols，仅包含 WOFF2 可变字体和 CSS。支持 Sass，并提供所有“填充”、“字重”、“等级”和“光学尺寸”的变体。material-icons：针对 Material Icons，包含 WOFF2、WOFF 字体和 CSS。支持 Sass，涵盖了“轮廓”、“圆角”、“锐利”和“双色调”等所有样式。@material-design-icons/font：material-icons包的轻量级版本，仅包含 WOFF2 字体和 CSS，适用于不需支持旧版浏览器（如 Internet Explorer）的项目。@material-design-icons/svg：仅提供优化后的 SVG 图标文件，适用于需要独立 SVG 资源或进一步定制的项目。
请注意：这些 npm 包由社区维护，谷歌官方不进行监控或审查。
使用字体文件 (Web Font)
对于网页项目，最推荐和最便捷的方式是直接从 Google Fonts 引用 CSS 链接，它会自动加载所需的字体文件。这种方式确保您总能获取到最新且经过优化的图标资源：
- Material Symbols (轮廓样式为例)：
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet"> - Material Icons (填充样式为例)：
<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
通过这种方式，您可以在 HTML 中直接使用图标的文本名称来显示它们，例如 <span class="material-symbols-outlined">home</span>。
适用于 Android 和 iOS 项目
除了 Web 环境，Material Design 图标也提供了适用于原生 Android 和 iOS 应用的资源。项目的 android 和 ios 目录下包含了各自平台的集成文件和指南，帮助移动开发者轻松地将这些图标纳入他们的应用设计中。
图标请求与贡献准则
谷歌致力于支持用户的图标需求，并鼓励社区参与。如果您有新的图标概念或需求，可以通过 GitHub Issues 提交您的请求。
然而，需要特别强调的是，谷歌不接受用户直接提交的 SVG 图标设计文件。这是因为 Material 图标的设计有严格的指导方针和内部生成流程。谷歌有其专属的源文件，并从中生成此仓库中的图标。尽管如此，用户完全可以提供概念描述或指向外部示例文件/图片的链接，以帮助谷歌理解您所期望的图标“精髓”。例如，您可以指向通用概念的图标示例，帮助谷歌设计师将其转化为 Material Design 风格。
第三方标志： 出于法律原因，Material Symbols 和 Material Icons 系列目前不包含任何第三方品牌的标志。过去曾包含的一些第三方标志也已被移除。
授权协议
Material Design 图标项目依据 Apache 许可证 2.0 版本 (Apache License Version 2.0) 提供。这意味着您可以自由地将这些图标和相关文档整合到您的产品中，进行修改、重组和再分发。虽然在您的应用“关于”页面中注明出处是一种友好的姿态，但并非强制要求。
结语
谷歌 Material Design 图标，无论是其经典形态 Material Icons 还是革新性的 Material Symbols，都为数字世界的视觉美学和用户体验做出了卓越贡献。它们不仅提供了一套丰富的视觉符号，更通过可变字体等先进技术，持续赋能着全球的开发者和设计师，共同创造出更具吸引力、更具功能性的数字产品。随着 Material Symbols 的不断成熟，我们期待它能在未来的设计领域扮演更重要的角色，带来更多创新与可能。