Material Design 是 Google 发布的一种全新的视觉设计语言。与此同时，Google 还推出了很多美观、响应式的小图标库，通过这些小图标，我们可以更好地向用户传达信息，提高交互体验。本文将介绍 Material Design 设计下的小图标使用指南，力求详细且有深度和学习以及指导意义。
1. Material Design 设计下的小图标概述
为了方便使用，Google 提供了一个 Material Design 图标库，它内置了大量的矢量小图标，可以通过 CSS 直接应用到网页中。这些图标可以按颜色、大小、方向等属性进行自定义，可以轻易地和其他设计元素进行组合和调整。
Material Design 图标库的优势在于设计风格与当前流行的扁平化风格相符，非常适合用于 web 应用的设计中，可以轻松地表达页面中元素的含义。
2. Material Design 小图标的使用
2.1. 引入 Material Design 图标库
要使用 Material Design 图标库，首先需要在 HTML 文件中导入相关的 CSS 和 JavaScript 文件，我们可以直接从 Google 的官网中下载相应的文件，也可以使用 CDN 加载。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ----- -------------------------------------------------------------- ----------------- --------------- ------ ------------ ------- ------ -- ------------------------------- ------- -------展开代码
在头部引入 Google 的字体库，这个库不仅仅用来加载 Material Design 小图标，也可以加载其他的 Google 字体，这里只需要获取小图标的字体即可。
2.2. 使用 Material Design 小图标
Material Design 小图标使用的 HTML 要素是 <i> 标签，它的 class 属性需要被设为 material-icons，内部的文本则是对应的图标名称，具体的名称可以从官网的图标库中找到。
<i class="material-icons">face</i>
2.3. 自定义颜色
默认情况下，Material Design 小图标的颜色是黑白灰的，我们可以通过设置 CSS 样式的方法改变它的颜色。
<i class="material-icons" style="color: #4CAF50">face</i>
2.4. 自定义大小
Material Design 小图标的大小可以通过设置 font-size 属性来控制。
<i class="material-icons" style="font-size: 36px">face</i>
2.5. 添加 Hover 效果
我们还可以为 Material Design 小图标添加鼠标 hover 效果，让用户用鼠标移入移出时产生一些视觉效果。
<style> .material-icons:hover { font-size: 48px; } </style> <i class="material-icons">face</i>
3. 小结
Material Design 小图标是一个非常不错的设计元素，它可以在网页中使用以提高交互体验。在使用 Material Design 小图标时，需要注意它的命名规则和使用场景。我们可以在官方网站上找到大量的图标，也可以根据需要自定义大小、颜色等属性。同时，我们还可以通过添加 hover 效果等方式美化小图标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b69a91306f20b3a62ab7b2
