简介
material-icon 是一个提供了 Google Material Design 风格的图标库，其中包含了大量常用图标，可以用于前端 Web 开发中的 UI 界面设计。它是一个 npm 包，可以通过 npm 安装并使用。
安装
在终端中输入以下命令，即可安装 material-icon 包：
npm install material-icon
使用
使用 material-icon 包的方法非常简单，只需要引入包，然后在 HTML 中使用对应的样式和图标名称即可。
引入
在 HTML 文件中，使用 <link> 标签引入 material-icon 的样式文件：
<link rel="stylesheet" href="node_modules/material-icon/dist/css/materialIcon.min.css">
然后，在 JavaScript 文件中，使用 require 或 import 将 material-icon 包引入：
// 使用 require 引入
const materialIcon = require('material-icon');
// 使用 import 引入
import materialIcon from 'material-icon';使用样式和图标
material-icon 中的样式和图标名称可以通过查看官方文档来获取。在 HTML 文件中，使用以下形式来添加对应的图标：
<i class="mi mi-{图标名称}"></i>其中，mi 是 material-icon 样式的类名，mi-{图标名称} 是对应图标的名称。例如，如果要添加 home 图标，则可以使用以下代码：
<i class="mi mi-home"></i>
修改样式
material-icon 也提供了一些选项来修改样式。例如，可以使用 size 属性来设置图标的大小：
<i class="mi mi-home" size="2x"></i>
也可以使用 color 属性来设置图标的颜色：
<i class="mi mi-home" color="#333"></i>
更多选项可以在官方文档中查看。
示例代码
以下是一个简单的示例代码，演示如何使用 material-icon 包来添加图标：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- ---- --------------- ----- ---------------- ---------------------------------------------------------------- ------- ------ ------------ ---- ------------ -- --------- ------------- -- --------- ------------- -- --------- ------------------ --------- ----------------- -- --------- ------------ -------------- ------- ---------------------------------------------------------------------- ------- -------
在上面的代码中，引入了 material-icon 的样式文件和 JavaScript 文件，并添加了四个图标。
结语
使用 material-icon 包可以方便地添加 Google Material Design 风格的图标，同时也可以通过选项来自定义图标的样式。通过本文的介绍，相信读者已经可以轻松地使用 material-icon 包来实现自己的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd746