material icons

素材アイコン

セルフホスティング マテリアル デザイン アイコン用の最新のアイコン フォントと 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 などのビルド ツールが、すべてのフォントを使用していない場合でも、すべてのフォントをビルド ディレクトリにコピーする可能性があります。ビルド サイズを小さくするには、必要なスタイルのみをインポートします。たとえば、塗りつぶしアイコンとアウトラインアイコンのみが必要な場合は、デフォルトのmaterial-icons.cssの代わりにfilled.cssとoutlined.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 >

CSS クラスの使用

あるいは、合字の代わりに CSS クラスを使用してアイコンを表示することもできます。もっと詳しく知る

利用可能なアイコン

デモを参照してください。

ライセンス

マテリアル デザインのアイコンは Google によって作成されています。

これらのアイコンを、Apache ライセンス バージョン 2.0 に基づいて製品に組み込めるようにしました。これらのアイコンとドキュメントを製品内で自由にリミックスして再共有してください。アプリの概要画面に帰属表示を記載していただければ幸いですが、必須ではありません。