Material Design 是谷歌推出的一套设计语言，它的目标是为了给开发者创造出整洁、一致以及方便的用户体验。在 Material Design 中，使用图标是很常见的一种情况，而 Material Icons 就是其中一种非常有代表性的图标库。在本篇文章中，我们将会详细介绍 Material Icons 的使用方法，它将为你之后的开发工作提供极大的帮助。
Material Icons 简介
Material Design 的图标文件非常特别，它们被打包成了一种 Web 字体的形式，也就是说，你可以直接将它们作为字体来使用。Material Icons 主要分为两种格式，一种是 .ttf 格式，另一种则是 .woff2 格式。
Material Icons 的使用
使用 Material Icons 非常简单，你可以使用以下的步骤：
1. 在Head中添加 Font 文件
使用 Material Icons 首先要添加连个 font 文件到你的web页面中。你可以在这里下载两个文件：
- materialdesignicons-webfont.ttf - TrueType 字体格式
- materialdesignicons-webfont.woff2 - Web Open Font Format (WOFF) 字体格式
<!--- 添加 Material Icons font 文件 --> <link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" type="text/css">
2. 通过 HTML 标签添加 Material Icons
现在，你可以将 Material Icons 应用到任何元素中。只需要在元素内添加相应的 HTML 代码即可：
<i class="mdi mdi-account"></i>
在上面的例子中，我们使用了 “mdi-account” 选择器且添加了一个 i 元素。使用 Material Design 图标库可以通过如下的格式进行：
<i class="mdi mdi-your-chosen-icon-name"></i>
使用 Material Icons 时，基本上有以下几种应用场景：
1. 作为按钮的图标
<button> <i class="mdi mdi-delete"></i> Delete </button>
2. 作为列表项的图标
-- -------------------- ---- ------- ---- ----- ---- ---------- --------------- ---- ------------------------------------------------------------- ------ ----- ---- ---------- --------------- ---- -------------------------------------------- ------ -----展开代码
3. 作为表单组件的图标
<div> <label for="username"> <i class="mdi mdi-account"></i> Username: </label> <input id="username" type="text" /> </div>
3. 使用 Material Icons 的CSS类
除了直接在 HTML 标签中使用 Material Icons 外，我们还可以通过 CSS 类来应用 Material Icons。
<button class="mdi mdi-arrow-back"></button>
-- -------------------- ---- ------- ---- - ------------- --------- ------- ------------- ------- ------------ ------- ----------- ----- ------------- -- ---------------- ------- ---------------- ----- --------- ------------- ------------- ------- ----------- ------- ----------- ---- ------------------------------- ------- ------------------------ ------------ -展开代码
4. 组合使用 Material Icons
组合使用 Material Icons 是一种更加高级的用法，你可以将多个图标组合成一个复合式的图标。
<i class="mdi mdi-checkbox-blank-circle-outline mdi-24px"></i>
在上面的例子中，我们使用了两个 Material Icons “mdi-checkbox-blank-circle-outline” 和 “mdi-24px”，之后它们自动组合成一个图标。
结束语
本次介绍了 Material Icons 的基本用法，包括如何在 HTML 中添加这些图标，如何使用 CSS 选择器以及如何组合使用这些图标。务必记住，使用图标时一定要非常谨慎，因为这些图标将会代表着你的准确和清新，你一定要选择合适的图标才能更好的服务于你的用户。
最后，值得一提的是，Material Icons 更适用于适用于 Material Design 的平台，如果你的网站并不是 Material Design 风格，这个图标库可能就不是最优的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67be81250c976d473a276b61
