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,无需任何配置即可使用。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
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图标-->
<i style="color: red" class="material-icons">face</i>
<!--一个delete图标,大小为18px-->
<i class="material-icons md-18">delete</i>
<!--一个face图标,大小为36px,在深色背景下使用-->
<i class="material-icons md-light md-36 md-light">face</i>
您也可以自定义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;
}
官方地址
点击图标即可获取引入代码
参考资料: