Material Design Icons 是一个开源的图标集，包含了各种常见的图标，适用于 Web 应用和移动应用的设计。本文将介绍如何使用 npm 包 material-design-icons 来引入这个图标库。
安装 material-design-icons
在开始使用 material-design-icons 之前，需要先安装 npm 包。可以通过以下命令进行安装：
npm install material-design-icons
引入 material-design-icons
安装完成后，可以在 HTML 文件中通过以下方式引入该图标库：
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
使用 material-design-icons
一旦引入成功，就可以在 HTML 文件中使用 Material Design Icons 了。例如，可以在一个按钮上添加一个 "search" 图标：
<button> <i class="material-icons">search</i> Search </button>
可选参数
Material Design Icons 还提供了许多可选参数，以便您自定义图标的外观和行为。以下是一些常用的示例：
颜色
可以使用 color 属性来指定图标的颜色，如下所示：
<i class="material-icons" style="color: red;">favorite</i>
大小
可以使用 font-size 属性来指定图标的大小，如下所示：
<i class="material-icons" style="font-size: 48px;">home</i>
悬停
可以使用 hover 属性来指定图标的悬停行为，如下所示：
<i class="material-icons" hoverable>delete</i>
总结
在本文中，我们介绍了如何使用 npm 包 material-design-icons 来引入 Material Design Icons 图标库，并提供了一些常用的可选参数供您自定义图标。希望这对您有所帮助，让您的 Web 应用和移动应用设计更加美观、富有创意！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32204
