Material icons图标

Material icons 是一套互联网开放的图标集合，由 Google 设计师团队“Google Material Design Team”开发，集成了多种常见的图标，例如文件、摄像头、音乐、搜索、保存等等。Material icons 是一个优秀的图标库，可以兼容多种应用程序和网站，并且可以随时使用和修改。

Material icons下共计900多个Material Icons图标，全部来自一个小文件，由Google字体服务器托管，也可以自行托管，支持所有现代Web浏览器，着色，大小和位置都采用css，基于矢量:在任何比例下，视网膜显示，低dpi显示屏看起来都很棒。

图标字体在最小的 woff2 格式中仅重 42KB，在标准 woff 格式中为 56KB。相比之下，使用gzip压缩的SVG文件通常大小约为62KB,但是通过仅将所需的图标编译为具有符号精灵的单个SVG文件，可以大大减少大小。

安装方法

1. 直接引入Google CDN提供的地址

在任何网页中使用的最简单方法是：包含以下一行HTML，无需任何配置即可使用。

2. 本地安装（git、npm、bower）

// 通过 Git 安装
$ git clone http://github.com/google/material-design-icons/
// 通过 npm 安装
$ npm install material-design-icons
// 通过 bower 安装
$ bower install material-design-icons

3. 自托管

需要一些额外的设置：将图标字体托管在某个位置，并添加以下 CSS @font-face 的src路径：/material-icons.woff2，例如Google提供的图标文件：https://fonts.gstatic.com/s/materialicons/v118/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2， 如果你觉得google这个cdn提供的速度有点慢的话，你可以使用国内bootcdn的链接 https://www.bootcdn.cn/material-design-icons/，里面有各版本的各类型的图标文件，当然也可以下载下来在本地引入。

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://cdn.bootcdn.net/ajax/libs/material-design-icons/2.0.0/iconfont/MaterialIcons-Regular.woff2) format('woff2');
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

使用方法

在html中使用

face

delete
  
face

您也可以自定义CSS样式，下述代码设置了 Material icons 的字体、大小、行高、间距、换行方式等属性，您可以根据需要自定义这些属性来修改 Material icons 的外观和行为。

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

官方地址

Material Icons - Material UI

点击图标即可获取引入代码

参考资料：

https://www.wp2.cn/material_icons/

https://www.cnblogs.com/bc8web/p/16076827.html