Material Design 是一种由 Google 提出的设计语言，可以营造出现代化、极简和美观的风格，而其中的 iconfont 很受到前端开发人员的欢迎。而今将介绍的 npm 包 material-design-icons-iconfont 提供了使用 Material Design iconfont 更方便的方法。
安装使用
首选需确保在本地有 Node 环境；
打开终端，进入项目目录并运行如下命令：
npm install material-design-icons-iconfont --save
然后在代码中应用图标即可。代码样例如下：
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ----- --------------- ---------------------------- ------------------- ----- ---------------------------- ------------------ ------------------------------------- ------------ ----- -------------------------------------------------------------- ----------------- ------- ------ -- ------------------------------- ------- -------
细节深度
Material Design iconfont 的一大优势是可以随心所欲地调整它的大小，比较实用。在 .material-icons 的 class 中使用 font-size 属性即可调整字体大小。
另一种使用方式是在 HTML 的元素中直接运行 JavaScript 代码。代码用法如下：
<i class="material-icons" onclick="alert('这是一个 Material Design 字体图标')"> info_outline </i>如果你需要更多的图标，可以参考 Material Design 官网的文档。不过推荐你在应用中使用尽可能少的图标，否则会降低页面加载速度。
一些 Material Design iconfont 的常用名字有：3d-rotation, alarm, shopping-basket, camera, chat, edit, home, info, and more。你可以在官网查看完整图标列表或通过搜索引擎找到更多资料。
学习意义
Material Design iconfont 已成为现代化设计风格不可或缺的一部分，并且有许多不同的使用方式。使用 npm 包 material-design-icons-iconfont 可以帮助开发人员更快速、更方便地使用 Material Design iconfont，并适应不同的开发需求。
效果展示
下面是一个示例，使用 material-design-icons-iconfont 来创建按钮：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
------------------------------------- ------------
----- -------------------------------------------------------------- -----------------
-------
---- -
-------- -------------
------- --------
----------------- --------
------ --------
------- -----
-------------- ----
-------- --- -----
---------- -----
-
---------- -
----------------- --------
-
--------
-------
------
------- ------------
-- ------------------------------- --
---------
------- ------------
-- --------------------------------- --
---------
-------
-------效果如下：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/material-design-icons-iconfont