Google Material Design 是 Google 推出的一套设计语言，而 Material Design Icons 则是为开发者提供的一套 Material Design 风格的 Icon 套件。在开发中，我们经常需要使用到这些图标，这里介绍如何使用 npm 包来轻松集成这些图标。
安装 google-material-design-icons 包
在项目根目录下，打开终端，输入以下命令：
npm install material-design-icons
导入需要的图标
在项目的 index.html 中添加以下代码：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
这里使用的是 Google 提供的图标字体，在网页中导入即可使用。
使用图标
使用图标之前，需要将需要的图标名称和类名匹配一下。可以在这里查看所有的图标和类名。
<i class="material-icons">face</i>
这里使用的是一个名为 face 的图标。
使用示例
-- -------------------- ---- -------
--------- -----
------
------
----- -------------------------------------------------------------- -----------------
-------
------
-- -------------------------------
-------
-------以上为示例代码，可以在你的项目中使用，并根据需要进行相应更改。
总结
通过使用 npm 包 material-design-icons，我们可以轻松集成 Material Design 风格的 Icon 套件。在项目中使用时，需要先导入所需要的图标字体，然后根据图标的名称和对应的类名进行使用。通过这种方式，使得开发中使用图标变得更加方便快捷且易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de1da