Angular Materialでアイコンの色を自在に操って、ワンランク上のデザインへ

Angular Materialでアイコンの色を設定する方法

親要素のカラープロパティを使用する

<mat-icon> タグは、デフォルトで親要素の color プロパティを継承します。つまり、アイコンの親要素となるコンポーネントやHTML要素の色を変更することで、アイコンの色も同様に変化させることができます。

<span style="color: blue;">
  <mat-icon>home</mat-icon>
</span>

上記の例では、<span> タグの color プロパティが blue に設定されているため、<mat-icon> タグで表示されるアイコンも青色になります。

mat-icon タグの color プロパティを使用する

<mat-icon> タグには、独自の color プロパティを設定することで、個別にアイコンの色を設定することができます。

<mat-icon color="red">favorite</mat-icon>

上記の例では、<mat-icon> タグの color プロパティが red に設定されているため、アイコンは赤色で表示されます。

カラーパレットを使用する

Angular Materialは、あらかじめ定義されたカラーパレットを提供しています。これらのカラーパレットを利用することで、一貫性のあるデザインを容易に実現することができます。

カラーパレットを使用するには、まず必要なパレットを @angular/material からインポートする必要があります。

@use "@angular/material" as mat;

次に、パレットから必要な色を定義します。

$app-primary: mat.define-palette(mat.$indigo-palette);

上記のように、mat.define-palette() 関数を使用して、必要なパレットと色相を指定することで、カスタムカラーを作成することができます。

最後に、作成したカスタムカラーを mat-icon タグの color プロパティに適用します。

<mat-icon color="app-primary">home</mat-icon>

上記の例では、app-primary という名前で定義したカスタムカラーが mat-icon タグに適用されているため、アイコンは青色で表示されます。

テーマを使用する

Angular Materialでは、テーマを使用してアプリケーション全体の配色を統一することができます。テーマを使用することで、アイコンの色を含め、アプリケーション全体のデザインを簡単に設定することができます。

テーマの詳細については、以下のドキュメントを参照してください。

補足

• currentColor プロパティを使用することで、現在のテーマの色に基づいてアイコンの色を設定することもできます。
• mat-icon-legacy コンポーネントを使用する場合は、color プロパティではなく class 属性を使用してアイコンの色を設定することができます。

これらの方法は、それぞれ異なる状況で役立ちます。状況に応じて適切な方法を選択してください。

Angular Materialでアイコンの色を設定するサンプルコード

親要素のカラープロパティを使用する

<span style="color: blue;">
  <mat-icon>home</mat-icon>
</span>

mat-icon タグの color プロパティを使用する

<mat-icon color="red">favorite</mat-icon>

カラーパレットを使用する

<mat-icon color="primary">home</mat-icon>

テーマを使用する

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

このコードでは、テーマで設定されたデフォルトの色が mat-icon タグに適用されているため、アイコンはテーマで設定された色で表示されます。

• 上記のコードは、Angular Material 13以降で動作します。
• アイコンの色を設定するには、CSSを使用する必要があります。
• アイコンの色を設定する方法は他にもいくつかあります。詳細は、Angular Material のドキュメントを参照してください。

Angular Materialでアイコンの色を設定するその他の方法

mat-icon コンポーネントには、svgIcon という入力プロパティがあります。このプロパティを使用して、独自の SVG アイコンを指定することで、そのアイコンの色を制御することができます。

<mat-icon [svgIcon]="myIcon">
</mat-icon>

上記の例では、myIcon という変数に SVG アイコンデータが格納されています。この SVG アイコンデータには、アイコンの色に関する情報が含まれているため、アイコンの色が制御されます。

.mat-icon {
  color: red;
}

上記の CSS スタイルは、すべての mat-icon コンポーネントに適用され、アイコンの色を赤色に変更します。

mat-icon コンポーネントを他の HTML 要素でラップすることで、その要素のスタイルをアイコンに適用することができます。

<span style="color: red;">
  <mat-icon>home</mat-icon>
</span>

Angular には、パイプと呼ばれる機能があります。パイプを使用して、データを加工することができます。アイコンの色を設定するためにパイプを使用することもできます。

<mat-icon [color]="myColor | colorPipe">
</mat-icon>

上記の例では、myColor という変数に色情報が格納されています。colorPipe は、色情報を処理して、mat-icon コンポーネントに適用する適切な形式に変換するパイプです。

注意事項

• 上記の方法を使用する場合は、Angular Material のドキュメントで定義されている仕様に準拠していることを確認してください。
• 互換性の問題を避けるために、最新バージョンの Angular Material を使用することをお勧めします。