概述
Material Icons 是一组为 Material design 设计的图标字体集合，包含了大量常用的图标。使用 Material Icons 可以让我们的 Web 应用程序获得更好的用户界面体验。而 material-icons-fonts 这个包则是 Material Icons 的字体包，是 npm 上使用 Material Icons 的必备依赖包之一。
需要说明的是，material-icons-fonts 包只包含了 Material Icons 的字体文件，如果需要使用具体的图标，需要在 HTML 中使用对应的 class 名称来引用，详细使用方法请继续阅读本文。
安装
使用 npm 命令安装 material-icons-fonts 包：
npm install material-icons-fonts
引用
在 HTML 中，先引入 material-icons-fonts 包提供的字体 CSS 文件：
<link href="./node_modules/material-icons-fonts/css/material-icons-font.css" rel="stylesheet">
然后，直接在 HTML 中使用该字体的 class 名称即可引用对应的图标：
<i class="material-icons-font">add_circle</i>
具体可以在官网（https://material.io/resources/icons/）上找到想要使用的图标名称，并在 HTML 中使用对应的 class 名称即可。
常用图标
下面列举一些常用的 Material Icon 图标及其 class 名称。
| 图标 | class 名称 |
|---|---|
| add | add |
| delete | delete_outline |
| edit | edit |
| save | save |
| search | search |
| share | share |
| menu | menu |
| close | close |
| check | check |
| star | star_border |
总结
material-icons-fonts 提供了使用 Material Icons 字体库的便利性。我们只需要安装该包，然后在 HTML 中引用对应的 class 名称即可使用。使用 Material Icons 能够增加 Web 应用的美观度和易用性，因此值得学习和使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583b84