Angular のすべてのマットアイコンのリスト

Angular のすべてのマットアイコンを見つけることができる Web サイトと、Angular プロジェクトでそれらのマットアイコンを使用する方法を紹介します。

Angular のマテリアルデザインアイコン DX

マテリアルデザインアイコン DX は、900 を超えるマテリアルアイコンを見つけることができる Google のマテリアルデザインアイコンのフォークです。このプロジェクトは、開発経験の問題を修正するために作成されました。

プロジェクトにマテリアルデザインアイコンをインストールする方法は 2つあります。

npm を使用してインストールするには：

npm install material-design-icons-iconfont --save

プリコンパイルされた CSS ファイルを include または@import するには：

<link href=".../material-design-icons.css" rel="stylesheet">

使い方

scss を使用すると、プロジェクトにフォントと変数をインポートできます。

$material-design-icons-font-directory-path: '~material-design-icons-iconfont/dist/fonts/';

@import '~material-design-icons-iconfont/src/material-design-icons';

クラスのカスタマイズ

Sass mixins を使用して、クラスをカスタマイズし、マテリアル変数にアクセスできます。

.my-home {
  @include material-icon('home');
}
# or
.my-home:before {
  content: material-icons-content('home');
}

アイコンのリストはここにあります。

Google が提供する AngularMaterial アイコン

Google のマテリアルデザインシステムアイコンはどのプロジェクトでも簡単に使用でき、900 以上のマテリアルアイコンがあります。<mat-icon> セレクターは、マテリアルアイコンを Angular で表示します。<mat-icon> は、MatIconModule と呼ばれる Angular マテリアルモジュールの一部です。

<mat-icon> コンポーネントに合字テキストを配置することにより、フォント合字をアイコンとして使用できます。

例：

<mat-icon>home</mat-icon>

Angular material modules から MatIconModule をインポートする必要があります。

import {MatIconModule} from '@angular/material/icon'

アイコンのリストはここにあります。