介绍
material-design-icons-iconfont-only 是一个由 Google 官方提供的 Material Design 图标库，它包含了多种不同用途的图标，可以在前端项目中使用。该图标库提供的图标都是以字体形式呈现，因此可以轻松应用于 web 项目，并且可以基于字体的方式进行自定义。
npm 是一个包管理器，它可以帮助开发者管理 JavaScript 包的安装、升级、卸载以及发布等操作。在前端开发过程中，使用 npm 安装 material-design-icons-iconfont-only 可以快速引入该图标库，并在项目中进行使用。
本文将介绍如何使用 npm 安装 material-design-icons-iconfont-only ，以及如何在项目中使用该图标库。
安装
- 首先，在终端或者命令行界面中进入项目目录，并输入以下命令来安装 material-design-icons-iconfont-only ：
npm install material-design-icons-iconfont-only
- 安装完成后，可以在项目的 node_modules 目录下找到该图标库。
使用
安装完成后，可以在 HTML 文档中使用以下代码来引用该图标库：
<link rel="stylesheet" href="./node_modules/material-design-icons-iconfont-only/css/material-icons.css">
引用完成后，即可调用该图标库中提供的图标。例如，在 HTML 文档中使用以下代码来显示一个 “home” 图标：
<i class="material-icons">home</i>
如果需要使用其他图标，可以在官方文档中查询该图标的名称，并在 HTML 文档中通过上述方式来调用。
深入学习
在项目中使用 material-design-icons-iconfont-only 不仅可以方便地引入各种图标，还可以通过一些方法进行自定义，例如更改图标颜色、更改图标大小等等。
更改图标颜色
要更改图标的颜色，可以在 CSS 中为图标添加以下样式：
color: #ff0000;
其中，#ff0000 即为你想要设置的颜色，可以根据自己项目的需求进行更改。
更改图标大小
要更改图标的大小，可以在 CSS 中为图标添加以下样式：
font-size: 30px;
其中，30px 即为你想要设置的大小，可以根据自己项目的需求进行更改。
字体替换
除了自定义图标的颜色和大小以外，还可以对 material-design-icons-iconfont-only 进行字体替换，以实现更加自由的图标样式设计。
具体的实现方法可以参考官方文档，在此不再赘述。
示例代码
以下是一个基于 material-design-icons-iconfont-only 的简单示例代码，可以帮助初学者快速上手该图标库：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ -------------
----- ---------------- ---------------------------------------------------------------------------------
-------
-- ------ --
------------------- -
------ --------
-
-- ------ --
--------------------- -
---------- -----
-
--------
-------
------
---- ---- ---
-- -------------------------------
---- ----- ---
-- --------------------- -------------
---- ----- ---
-- --------------------- ---------------
-------
-------总结
本文介绍了如何使用 npm 安装 material-design-icons-iconfont-only 图标库，并在前端项目中进行使用。此外，还介绍了如何通过 CSS 进行自定义，以实现更加自由的图标样式设计。通过学习本文，相信读者可以快速上手使用该图标库，并进行进一步的自定义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2d81e8991b448dae8a