在前端开发中，添加图标可以让页面更加生动有趣。Material Design 给出了多种图标库，其中 material-design-icons-light 是一个轻量级的图标包，支持 SVG 格式，可以快速方便地定制和使用。本文将介绍 npm 包 material-design-icons-light 的使用方法。
安装
使用 npm 可以轻松安装 material-design-icons-light，只需要在终端中输入以下命令即可：
npm install material-design-icons-light
导入
在需要使用 material-design-icons-light 的地方，可以用以下方式导入：
import 'material-design-icons-light/dist/material-design-icons.css';
导入后，就可以使用 material-design-icons-light 提供的图标了。
使用方法
material-design-icons-light 提供了许多精美的图标，可以在官网查看到具体的图标列表。使用时，只需要在 HTML 中按照以下方式添加即可：
<i class="material-icons">icon_name</i>
其中，icon_name 代表需要使用的图标名称，例如使用“home”图标：
<i class="material-icons">home</i>
也可以在 CSS 中修改图标的样式，例如修改图标字体大小：
.material-icons {
font-size: 48px;
}定制化使用
material-design-icons-light 提供了多种定制化方式，可以根据自己的需求来创建符合自己品牌风格的图标。
修改颜色
可以使用 CSS 来修改图标的颜色：
.material-icons {
color: #ff0000;
}自定义图标
如果需要添加自定义图标，可以使用将 SVG 图标添加到项目中的方式。以添加自定义“star”图标为例：
从官网下载 “star” 图标的 SVG 文件，并修改为名为 “star.svg” 的文件。
将该文件复制到项目的 “assets” 目录下。
在 HTML 中添加以下代码：
<svg class="svg-icon" viewBox="0 0 24 24"> <use xlink:href="/assets/star.svg#star"></use> </svg>
其中，xlink:href 的后面部分是此自定义 SVG 图标的 id，需要与 SVG 文件中图标的 id 相匹配。
- 在 CSS 中添加以下代码：
.svg-icon {
width: 24px;
height: 24px;
fill: #000;
}完成后，就可以使用该自定义“star”图标了：
<i class="material-icons">star</i>
示例代码
下面是一个基本示例代码，展示了如何使用 material-design-icons-light 添加图标、修改样式和添加自定义图标：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ------ ---- ------------
----- ---------------- -------------------------------------------------------------------------------
-------
--------------- -
---------- -----
------ --------
-
--------- -
------ -----
------- -----
----- -----
-
--------
-------
------
------------ ------ ---- ---------
-- -------------------------------
-- ----------------------------------------
---- ---------------- ---------- - -- ----
---- -----------------------------------------
------
-------
-------总结
npm 包 material-design-icons-light 是一种方便快捷的图标使用方式，通过以上介绍，您可以轻松使用该图标库，修改其样式，甚至添加自定义图标。希望本篇文章能对您的前端开发工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601481e8991b448de23a