用于自托管材料设计图标的最新图标字体和 CSS。
该软件包会自动更新,因此它将始终具有来自 Google 的最新图标。
对于材料符号,请参阅
material-symbols
对于 SVG,请参阅
@material-design-icons/svg
使用以下命令安装最新版本:
npm install material-icons@latest
注意:如果您要从 0.x 升级到 1.x,请参阅 1.0.0 发行说明。
在 JS 中导入(例如:Create React App 中的src/index.js
,Vue CLI 中的src/main.js
):
import 'material-icons/iconfont/material-icons.css' ;
或在 CSS 中导入(例如:Angular CLI 中的src/styles.css
):
@import 'material-icons/iconfont/material-icons.css' ;
或以 HTML 格式导入:
< link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >
要显示图标,请使用以下选项之一:
< span class =" material-icons " > pie_chart </ span > <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span > <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span > <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->
默认的material-icons.css
包含所有字体的CSS。这可能会导致 webpack 等构建工具将所有字体复制到构建目录,即使您没有使用所有字体。要减小构建大小,请仅导入您需要的样式。例如,如果您只需要填充和轮廓图标,请导入filled.css
和outlined.css
而不是默认的material-icons.css
:
- import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';
图标 | CSS | 萨斯 |
---|---|---|
充满 | 填充.css | 填充.scss |
概述 | 概述.css | 概述.scss |
圆形的 | 圆形.css | 圆形.scss |
锋利的 | 锐利.css | 锐利.scss |
二音 | 双音.css | 双音.scss |
在 Sass 中导入(例如:Angular CLI 中的src/styles.scss
):
@import ' material-icons/iconfont/material-icons.scss ' ;
可用的 Sass 变量:
$material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;
如果您在使用 webpack 或 Vue CLI 时遇到错误,请在导入之前添加以下行:
$material-icons-font-path : ' ~material-icons/iconfont/ ' ;
mat-icon
要显示图标,请使用以下选项之一:
< mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >
或者,您可以使用 CSS 类而不是连字来显示图标。了解更多
请参阅演示。
材料设计图标由 Google 创建。
我们已根据 Apache 许可证版本 2.0 向您提供这些图标,以便将其合并到您的产品中。请随意在您的产品中重新混合和重新共享这些图标和文档。我们希望在您的应用程序的“关于”屏幕中显示归属信息,但这不是必需的。