Material 图标指南

Material 图标概览 - 在哪里获取这些图标以及如何将其与您的项目集成。

什么是 Material 图标?

Material Design 系统图标简单、现代、友好,有时还很古怪。每个图标都是根据我们的设计准则创建的,以简单和极简的形式描绘整个界面中常用的通用概念。这些图标经过优化,可确保无论尺寸大小都能确保清晰可辨,在所有常见的平台和显示分辨率下都能呈现精美的外观。

您可以在 Material 图标库中查看完整的 Material Design 图标。

图标库

获取图标

这些图标有多种格式,适用于不同类型的项目和平台、应用的开发者,以及模型或原型中的设计人员。

许可

我们提供了这些图标,您可以按照 Apache 许可版本 2.0 将它们整合到您的产品中。您可以随时在产品中重新混合并重新共享这些图标和文档。我们希望在您应用的about屏幕中提供提供方说明,但这并非强制性要求。

浏览和下载单个图标

Material 图标库中提供了整套 Material 图标。这些图标支持以 SVG 或 PNG 格式下载,这些格式适用于 Web、Android 和 iOS 项目,也可用于任何设计工具。

正在下载所有内容

获取所有图标的最新稳定版 zip 归档文件(约 310MB)或母版中的前沿版本

Git 代码库

Material 图标可从 git 代码库中获取,该代码库包含完整的图标集,其中包括我们正在提供的所有各种格式。

$ git clone https://github.com/google/material-design-icons/

适用于网页的图标字体

Material 图标字体是将 Material 图标与 Web 项目整合的最简单方法。我们已将所有 Material 图标打包为一种字体,以充分利用现代浏览器的排版渲染功能,以便 Web 开发者只需几行代码即可轻松地集成这些图标。

使用字体不仅是最方便的方法,而且非常高效并且美观:

  • 一个小文件提供 900 多个图标。
  • 由 Google 网页字体服务器提供,也可以自行托管。
  • 所有新型网络浏览器均支持。
  • 完全使用 CSS 实现彩色、尺寸和定位。
  • 基于矢量:在任何尺寸、Retina 显示屏、低 dpi 显示屏上都能完美呈现。

采用最小 woff2 格式的图标字体大小仅为 42KB,采用标准 woff 格式时大小为 56KB。 相比之下,使用 gzip 压缩的 SVG 文件通常大小约为 62KB,但通过将所需的图标仅编译为包含符号精灵的单个 SVG 文件,可以大大减小文件大小。

设置方法 1. 通过 Google Fonts 使用

若要设置在任何网页中使用的图标字体,最简单的方法就是使用 Google Fonts。您只需添加一行 HTML 代码:

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

与其他 Google 网页字体类似,系统将提供正确的 CSS 以激活浏览器专用的“Material 图标”字体。系统会声明一个名为 .material-icons 的另一个 CSS 类。 任何使用此类的元素都将拥有正确的 CSS,以便从网页字体呈现这些图标。

设置方法 2. 自行托管

对于希望自行托管网页字体的用户,需要进行一些额外设置。将图标字体托管在某个位置(例如 https://example.com/material-icons.woff),并添加以下 CSS 规则:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

此外,还需要声明渲染图标的 CSS 规则,才能正确渲染字体。这些规则通常包含在 Google 网页字体样式表中,但在自行托管字体时需要手动添加到项目中:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

在 HTML 中使用图标

将图标加入网页中非常简单。下面是一个小示例:

<span class="material-icons">face</span>

此示例使用了一种名为“连字”的排版功能,借助该功能,只需使用其文本名称即可呈现图标字形。替换操作由网络浏览器自动完成,与等效的数字字符引用相比,提供的代码更容易读懂。

桌面设备和移动设备上的大多数新型浏览器都支持此功能。

Browser 版本支持连字
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
微软 IE 10
Microsoft Edge 18
Opera 15
Apple MobileSafari iOS 4.2
Android 浏览器 3.0

对于不支持连字的浏览器,回退到使用数字字符引用来指定图标,如下例所示:

常规
<span class="material-icons">&#xE87C;</span>

选择任意图标并打开图标字体面板,即可找到 Material 图标库中的图标名称和代码点。在我们的 Git 代码库中,每种图标字体都有一个代码点索引,用于显示完整的名称和字符代码(此处)。

在 Material Design 中设置图标样式

这些图标的设计遵循 Material Design 指南,使用建议的图标大小和颜色时效果最佳。以下样式可让您轻松应用我们建议的尺寸、颜色和活动状态。

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

大小

虽然字体中的图标可以缩放到任何尺寸,但根据 Material Design 图标指南,我们建议您以 18px、24px、36px 或 48px 显示这些图标。默认值为 24 像素。

标准 Material Design 尺寸指南的 CSS 规则:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Material 图标的视觉效果最大为 24px,但如果图标需要以其他尺寸显示,使用上述 CSS 规则将有所帮助:

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36px
<span class="material-icons md-36">face</span>
48px
<span class="material-icons md-48">face</span>

填色游戏

使用图标字体可以轻松设置任何颜色的图标样式。根据 Material Design 图标指南,在浅色背景或深色背景下显示活动图标时,我们建议使用黑色(不透明度为 54%)或白色(不透明度为 100%)。如果图标已停用或无效,请分别针对浅色背景和深色背景使用 26% 的黑色和 30% 的白色。

以下是使用上述 Material CSS 样式的一些示例:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

在采用深色前景颜色的浅色背景上绘制图标的示例:

常规
<span class="material-icons md-dark">face</span>
已停用
<span class="material-icons md-dark md-inactive">face</span>

在采用浅色前景颜色的深色背景中绘制图标的示例:

常规
<span class="material-icons md-light">face</span>
已停用
<span class="material-icons md-light md-inactive">face</span>

要设置自定义图标颜色,请定义一条 CSS 规则来指定所需的字体颜色:

.material-icons.orange600 { color: #FB8C00; }

然后在引用图标时使用类:

常规
<span class="material-icons orange600">face</span>

适用于网页的图标图片

Material 图标还可以作为普通图片提供,采用 PNG 和 SVG 格式。

SVG

Material 图标以适用于网络项目的 SVG 形式提供。您可从 Material 图标库下载各个图标。还可以从位于以下路径的 Material Design 图标 git 代码库中获取 SVG:

material-design-icons/src/

例如,地图的图标位于 src/maps 中:

material-design-icons/src/maps/

如果网站上使用了多个图标,我们建议您根据图片创建精灵表。如需了解详情,请参阅 git 代码库的 sprites 目录中的文档。

PNG

PNG 是在网络上显示图标的最传统方式。我们从 Material 图标库下载并为每个图标提供了单密度和双密度。它们在下载内容中分别称为 1x2x。图标也可在 git 代码库中的以下位置找到:

material-design-icons/png/

如果网站上使用了多个图标,我们建议您根据图片创建精灵表。如需了解详情,请参阅 git 代码库中的 sprites 目录中的建议。


Android 图标

Material 图标库中提供了适合 Android 的 PNG 文件。它们具有所有受支持的屏幕密度,因此在任何设备上都能正常显示。

Material Design 图标 Git 代码库中也提供了这些图标,这些图标的颜色和尺寸均相同,如下所示:

矢量可绘制对象目前只能以 24dp 的黑色图标提供。这是为了兼容我们最标准的图标大小。如需以其他颜色渲染图标,请使用 Android Lollipop 支持的可绘制对象色调调节

使用矢量可绘制对象时,可能不需要添加 xxxhdpi 密度 PNG,因为支持该屏幕密度的设备不太可能不支持矢量可绘制对象。


iOS 图标

Material 图标在 iOS 应用中也效果出色。在 Material 图标库git 代码库中,这些图标已打包到 Xcode 映像集中,以便与 Xcode Asset Catalogs (xcassets) 轻松搭配使用。可以将这些图像集添加到任何 Xcode Asset Catalogs,方法是将它们拖动到 Xcode 上的资源目录中,或将此文件夹复制到 xcasset 文件夹中。

iOS 映像集

该图像集包含单密度、双密度和三密度图像(1x、2x、3x),因此适用于所有已知的 iOS 屏幕密度。虽然系统提供了黑色和白色图标,但我们建议您将 UIImage 的 imageWithRenderingModeUIImageRenderingModeAlwaysTemplate 搭配使用,这样就可以将图片用作 Alpha 蒙版,并可将图片色调调节为任何可能的颜色。

Objective-C 示例:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Swift 示例:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

从右向左书写的图标

阿拉伯语和希伯来语等语言从右到左 (RTL) 读取。对于 RTL 语言,应镜像界面以按 RTL 显示大多数元素。当界面针对 RTL 进行镜像时,某些图标也应进行镜像。当为了支持从右到左的界面而对文本、布局和图标进行镜像反转时,与时间有关的任何内容均应表现为从右向左移动。例如,向前指向左,后退指向右。但请注意,放置图标的环境也会影响是否应镜像图标。

只有当图标的方向与 RTL 模式下的其他界面元素相一致时,系统才应镜像图标。如果某个图标在 RTL 界面中呈现出不同的外观特征,那么此图标也应镜像到 RTL。例如,如果编号列表中的数字在 RTL 语言中位于右侧,那么这些数字应位于镜像图标的右侧。

Android 上的 RTL 图标

这篇 Android 开发者文章深入介绍了如何实现 RTL 界面。默认情况下,在 Android 上,当布局方向被镜像时,图标不会被镜像。您需要在需要时专门镜像相应图标,方法是为 RTL 语言提供专用资源,或者使用框架功能镜像资源。

如需为 RTL 语言提供专用资源,您可以在资源目录(例如 res/drawable-ldrtl/)上使用 ldrtl 限定符。此类目录中的资源将仅用于 RTL 语言。对于搭载 Android API 19 或更高版本的设备,框架还会为可绘制对象提供 autoMirrored 属性。当此属性设置为 true 时,可绘制对象将自动镜像 RTL 语言。

使用 autoMirrored:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

如果无法使用自动镜像或提供备用可绘制资源,也可使用 ImageView scaleX 属性镜像可绘制对象(例如,通过在 res/layout-ldrtl 目录中提供特定于 RTL 的布局)。

在布局文件中镜像:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

最后,可程序化地镜像可绘制对象。

使用 getLayoutDirection 手动检查布局方向:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

以编程方式镜像 ImageView 内容:

imageView.setScaleX(-1);

iOS 上的 RTL 图标

iOS 具有附加到每个视图的 UISemanticContentAttribute 的概念。可为 unspecifiedforceLeftToRightforceRightToLeftplaybackspatial。iOS 使用此值和呈现界面的设备的(从左到右 (LTR)/RTL 设置)确定视图的有效布局方向。此 validLayoutDirection 决定是否在显示图片时镜像图片。

默认情况下,图片的语义内容设置为 unspecified。这会导致它们在 RTL 模式下进行镜像。如果您不希望某个图标被镜像,则需要明确将其设置为 forceLeftToRight。Apple 指出了一些不应镜像的例外情况,例如媒体播放(快进、快退等)、音符、表示时间流逝的图片等。

Objective-C 示例:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Swift 示例:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

如需查看有关如何在 iOS 和 macOS 上实现 RTL 的更深入文档,请参阅 Apple 的 RTL 文档

iOS 9 中添加了语义内容。如果您要支持早期版本的 iOS,Material 国际化框架会将部分功能向后移植到 iOS 8。

网页上的 RTL 图标

建议您参阅以下文章作为 Web 上的 RTL 入门:https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

默认情况下,在 Web 上,当布局方向被镜像时,图标不会被镜像。您需要专门镜像相应图标

以下示例展示了如何实现一个简单的 RTL CSS 规则。也可在 Codepen 上查看

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

使用 ImageMagick 生成您自己的 RTL 图标

如果无法在代码中镜像图标,您可以使用 ImageMagick 水平镜像图片。

convert -flop my_icon.png my_icon_rtl.png

应针对 RTL 镜像哪些图标?

以下是可以通过编程方式镜像到 RTL 的图标列表:

返回箭头 返回 iOS 箭头 前进箭头
向前箭头 - iOS 向左箭头 向右箭头
项分配 作业发回 退格键
电量未知 拨打了 合并通话
错过了 个通话 个未接来电 接听了 个来电
通话分配 左侧 V 形 V 形(右侧)
Chrome 阅读器模式 部未知设备 dvr
个活动备注 个精选播放列表 个精选视频
首页 趟航班着陆点 航班起飞
减少 格式缩进 增加了 格式缩进 带项目符号的格式列表
前进 个函数 输入
”键盘标签页 个标签 个标签重要
”标签大纲 最后一页 发布
”列表 实时帮助 移动设备屏幕共享
多折线图 之前导航 浏览下一个
下周 条备注 在新窗口中打开
个播放列表添加 添加到队列中的音乐 重做
条回复 全部回复 屏幕共享
发送 个短文本 显示图表
排序 星半 个主题
趋势持平 目录 呈下降趋势
呈上涨趋势 撤消 个视图列表
视图被子 自动换行