material icons下載 - material icons原始碼下載

material icons

其他源碼

v1.13.12

下載

材料圖示

用於自託管材料設計圖示的最新圖示字體和 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

在 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/ ' ;

使用 Angular `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 >