材质
设计
精简版
样式

Material Design Lite 是 Material Design 的轻量级实现，专为 Web 设计。有关其他平台的更详细指南和规范，请参阅 Material Design 网站

排版

h1
细体 112sp
display-4 字体粗细 300
h2
常规 56sp
display-3 字体粗细 400
h3
常规 45sp
display-2 字体粗细 400
h4
常规 34sp
display-1 字体粗细 400
h5
常规 24sp
headline 字体粗细 400
h6
常规 20sp
title 字体粗细 500
注意：此部分仅用于演示 CSS 中的标题和显示样式。有关更多排版指南，请参阅 Material Design 规范。
file_download 下载 Roboto 字体 1.21 MB (.zip)
要将 Roboto 嵌入您的网页，请将代码作为 HTML 文档 <head> 中的第一个元素复制。
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
预览图标 arrow_forward

图标

Material Design 图标是 Google Material Design 规范中提供的官方开源图标。包含内容

  • 所有图标的 SVG 版本，包括 24px 和 48px 两种尺寸
  • 所有图标的 SVG 和 CSS 雪碧图
  • 针对 Web 的 1x、2x 图标（PNG）
  • 针对 iOS 的 1x、2x、3x 图标（PNG）
  • 所有图标的高 DPI 版本（hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi）（PNG）

入门指南

您有几种获取图标的方法。

下载压缩包

获取最新稳定版的所有图标的压缩包（约 57MB），来自 master 分支的最新版本。

file_download 下载

Bower

使用 **Bower** 包管理器安装图标。
$ bower install material-design-icons --save

npm

您也可以在 **npm** 上找到所有图标。
$ npm install material-design-icons --save

使用

查看包含的 index.html 文件，以预览此集中包含的所有图标。您可以根据项目需要自由使用这些图标。

结构

通常，图标类别（例如 action）将包含以下目录，其中包含多种分辨率的图标。

  • 1x、2x Web
  • 1x、2x、3x iOS
  • drawable hdpi、mdpi、xhdpi、xxhdpi、xxxhdpi
  • svg

根据项目所需的图标分辨率进行选择，然后复制并引用要使用的图标。

雪碧图

Material Design 图标附带每个图标类别的 SVG 和 CSS 雪碧图。这些可以在 sprites 目录下找到，位于 svg-sprite 和 css-sprite 中。

使用 CSS 雪碧图

要使用 CSS 雪碧图，请引用要使用的图标类别的样式表，然后在标记中包含图标定义。例如，要使用 css-sprite-av 中的某个播放图标。

就是这样！部署项目时，不要忘记发布相应的 CSS 和 SVG/PNG 文件。

引用样式表
<link href="css-sprite/sprite-av-black.css" rel="stylesheet">
创建一个将使用图标作为背景的元素
<div></div>
添加一个类，引用 icon 雪碧图和特定的 icon icon-ic_play-circle_outline_black_24dp，您可以从上面的样式表中获取。
<div class="icon icon-ic_play-circle_outline_black_24dp"></div>

使用 SVG 雪碧图

同样，要使用 SVG 雪碧图，请引用图标类别的样式表，然后在标记中包含图标定义。

例如：要使用 svg-sprite-av 中的某个播放图标，请引用样式表
<link href="svg-sprite/svg-sprite-av.css" rel="stylesheet">
创建一个将使用图标作为背景的元素
<div></div>
接下来，确保为图标设置尺寸。这可以通过内联或通过类来完成。在本例中，我们将使用类。
<style>
  .svg-ic_play_circle_outline_24px-dims { width: 24px; height: 24px; }
</style>
最后，设置尺寸和特定的图标 svg-ic_play_circle_outline_24px，您可以从上面的样式表中获取。
<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims"> </div>

Polymer 图标

如果您希望将图标集与 Polymer 一起使用，我们建议您通过 **<iron-icons>-element** 使用它们。

许可证

所有图标均在 **署名 4.0 国际许可证** 下发布。

调色板

调色板

如果您使用扩展调色板，请使用第一个颜色作为应用程序的主要颜色，使用其他颜色作为强调色。

**查看所有颜色及其可访问性比率**。此资源包含有关在彩色背景上使用白色或黑色文本时适当对比度比率和 Alpha 值的信息。

file_download 下载调色板 0.02 MB (.zip)
arrow_forward 尝试自定义 CSS 主题构建器
下载工具包