简介
mtrl-icon 是一个集成了 Material Design 图标库的 npm 包，可以帮助开发者快速在前端项目中引用 Material Design 风格的图标。该图标库包含了丰富的图标，可以满足大部分的设计需求。
安装
在终端中运行以下命令即可安装 mtrl-icon：
npm install mtrl-icon --save
使用
引用
在项目的 HTML 文件中引用 mtrl-icon 的 CSS 文件：
<link rel="stylesheet" href="node_modules/mtrl-icon/css/material-icons.css" />
基本用法
mtrl-icon 的图标使用方法如下：
<i class="material-icons">face</i>
其中 face 为图标名，可以替换为任意 Material Design 图标的名字。具体的图标名可以在此查看：Material Design icons。
其他用法
可以通过添加 material-icons-outlined、material-icons-round 或 material-icons-sharp 类来使用不同风格的图标。例如：
<i class="material-icons-outlined">face</i> <i class="material-icons-round">face</i> <i class="material-icons-sharp">face</i>
此外，还可以通过设置 font-size、color 等 CSS 属性来对图标进行自定义样式。
示例代码
以下是一个简单的示例，展示了如何使用 mtrl-icon 在 HTML 中显示一个 Material Design 图标：
-- -------------------- ---- -------
--------- -----
------
------
-----
----------------
----------------------------------------------------
--
-------
----- -
---------- -----
------ ----
-
--------
-------
------
---- -------------
-- -------------------------------
------
-------
-------总结
通过以上介绍，我们了解到如何在前端项目中使用 npm 包 mtrl-icon，并可以灵活地定制图标的大小、颜色等样式属性。Material Design 图标风格简单清晰，可帮助开发者快速搭建符合标准的美观界面。在实际的开发中，还可以参考 Material Design 风格指南，提高界面设计的质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566de81e8991b448e32f5