Material Design Icons 开发者指南

最新推荐文章于 2025-04-09 09:17:43 发布

苏钥凤Magdalene

最新推荐文章于 2025-04-09 09:17:43 发布

阅读量931

点赞数 25

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00639/article/details/146530214

Material Design Icons 开发者指南

material-design-icons Material Design icons by Google (Material Symbols) 项目地址: https://gitcode.com/gh_mirrors/ma/material-design-icons

1. 项目介绍

Material Design Icons 是由 Google 提供的一套开源图标库，包含了两套图标集合：Material Symbols 和 Material Icons。Material Symbols 是基于变量字体技术构建的最新图标集，而 Material Icons 则是经典图标集，但自 2022 年起已停止更新。这些图标遵循 Google 的 Material 设计指南，适用于各种项目和平台。

2. 项目快速启动

安装图标字体

要使用 Material Design Icons，首先需要将图标字体文件包含到项目中。可以从 Google Fonts 获取字体链接，并在 HTML 文件中添加如下代码：

<link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

使用图标

在 HTML 中使用图标非常简单，只需添加一个 <i> 标签，并设置相应的类名。例如，要使用 Material Icons 的home图标，可以这样做：

<i class="material-icons">home</i>

对于 Material Symbols，可以使用类似的语法：

<i class="material-symbols-outlined">home</i>

3. 应用案例和最佳实践

在 Web 应用中使用图标

在 Web 应用中，可以通过将图标字体链接添加到页面的 <head> 部分来使用 Material Design Icons。使用 CSS 类来指定所需的图标，并根据设计需求调整大小和颜色。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <i class="material-icons md-48">star</i>
</body>
</html>

在上面的例子中，md-48 是一个 CSS 类，用于设置图标的大小为 48px。

在 Android 应用中使用图标

在 Android 开发中，可以通过将图标作为字体资源添加到项目中来使用 Material Design Icons。然后在布局文件中使用 TextView 或 ImageView 来显示图标。

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="\uE80D" <!-- 这是 Material Icons 的 home 图标的 Unicode 编码 -->
  android:fontFamily="@font/material_icons"
  android:textSize="24sp" />