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

google/material-design-icons

菜单

快速入门

相关源文件

本页为开发者提供了将 Google Material Design Icons 整合到项目中的实用指南。它涵盖了 Material Symbols（当前图标集）和 Material Icons（经典图标集）的基本设置和用法。要详细了解这两个图标系统的对比，请参阅Material Icons vs. Material Symbols。

Material Design Icons 概述

Google Material Design Icons 是一个遵循Material Design 指南设计的综合性图标库。该存储库包含两个不同的图标集：

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

两个图标集共享相同的底层设计，但在实现方式和功能上有所区别。

来源：README.md3-7 README.md51-74 README.md75-98

快速入门：Web 实现

在您的 Web 项目中实现 Material Design Icons 的最快方法是使用 Google Fonts CDN。此方法可提供优化的传输，并确保您使用的是最新版本。

然后在 HTML 中使用图标

对于 Material Icons（旧版）

然后在 HTML 中使用图标

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

安装选项

将 Material Design Icons 引入您的项目主要有三种方式：

这是 Web 项目最高效的方法，并确保您始终拥有最新版本。

图标集风格CDN 链接
Material Symbols描边https://fonts.googleapis.ac.cn/css2?family=Material+Symbols+Outlined
Material Symbols圆角https://fonts.googleapis.ac.cn/css2?family=Material+Symbols+Rounded
Material Symbols锐利https://fonts.googleapis.ac.cn/css2?family=Material+Symbols+Sharp
Material IconsFilledhttps://fonts.googleapis.ac.cn/css2?family=Material+Icons
Material Icons描边https://fonts.googleapis.ac.cn/css2?family=Material+Icons+Outlined
Material IconsRoundhttps://fonts.googleapis.ac.cn/css2?family=Material+Icons+Round
Material Icons锐利https://fonts.googleapis.ac.cn/css2?family=Material+Icons+Sharp
Material IconsTwo Tonehttps://fonts.googleapis.ac.cn/css2?family=Material+Icons+Two+Tone

2. 直接下载

您可以直接从存储库下载字体文件。

  • Material Symbols 变量字体位于 variablefont 目录中。
  • Material Icons 固定字体位于 font 目录中。

3. npm 包（第三方）

有多个第三方 npm 包可用于与基于 npm 的项目更轻松地集成。请注意，这些包并非由 Google 官方维护。

包描述
material-symbolsWOFF2 可变字体和 Material Symbols 的 CSS
material-iconsWOFF2、WOFF 字体和 Material Icons 的 CSS
@material-design-icons/font仅包含 WOFF2 字体的轻量级版本
@material-design-icons/svg图标的 SVG 版本

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

实现工作流程

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

基本用法

显示图标

要显示图标，请创建一个带有适当类的 HTML 元素，并将文本内容设置为图标名称。

CSS 样式

您可以使用标准的 CSS 属性来设置图标样式。

自定义 Material Symbols

Material Symbols 通过 CSS 变量提供了额外的自定义功能。

可变范围描述
FILL0 到 1控制填充级别（0 = 轮廓，1 = 填充）
wght100 到 700控制粗细（从细到粗）
GRAD-50 到 200控制字形等级（默认为 0）
opsz20 到 48控制光学尺寸（默认为 24px）

来源：README.md51-74

存储库结构

了解存储库结构有助于查找特定资源。

来源：README.md66-98

查找图标

浏览和搜索图标最简单的方法是通过 Google Fonts 网站。

找到想要使用的图标后，记下其名称（例如，“search”、“home”、“menu”），然后在实现中使用该名称。

来源：README.md5-7

下一步

在完成基本集成设置后，您可能需要进一步了解：

  1. Material Icons 和 Material Symbols 之间的具体差异（Material Icons vs. Material Symbols）
  2. 关于 Material Symbols 及其变量字体技术的详细信息（Material Symbols）
  3. 特定平台的实现指南（使用 Material Symbols 或 使用 Material Icons）
  4. 关于字体文件和资源组织的详细技术信息（技术实现）

许可证

Material Design Icons 在 Apache License Version 2.0 下可用，允许您自由地将其整合到您的产品中。

来源：README.md138-141 LICENSE1-202