Angular Material アイコンの色設定

Angular Material でアイコンの色を設定する方法 (日本語)

Angular Material では、アイコンの色を簡単にカスタマイズすることができます。以下にその方法を説明します。

mat-icon 要素を使用する

アイコンを表示するために、mat-icon 要素を使用します。

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

color 属性で色を設定する

mat-icon 要素の color 属性を使用して、アイコンの色を指定します。

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

ここで、color 属性の値は、以下のように設定できます。

• basic
  デフォルトのカラーを使用します。
• warn
  ウォーニングカラーを使用します。
• accent
  アクセントカラーを使用します。
• primary
  プライマリカラーを使用します。

CSS でスタイルを設定する

より細かい制御が必要な場合は、CSS を使用してアイコンのスタイルを設定することができます。

.my-icon {
  color: green;
}

<mat-icon class="my-icon">home</mat-icon>

例

<mat-icon color="primary">home</mat-icon>
<mat-icon color="accent">favorite</mat-icon>
<mat-icon color="warn">delete</mat-icon>
<mat-icon class="my-icon">search</mat-icon>

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

<mat-icon color="primary">home</mat-icon>
<mat-icon color="accent">favorite</mat-icon>
<mat-icon color="warn">delete</mat-icon>
<mat-icon color="basic">search</mat-icon>

<mat-icon class="my-icon">home</mat-icon>

.my-icon {
  color: green;
}

テーマカラーを使用する

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

$primary: #009688;
$accent: #ff4081;
$warn: #ff9800;

.my-theme {
  color: $primary;
}

<mat-icon class="my-theme">home</mat-icon>

mat-icon 要素の svgIcon 属性を使用する

<mat-icon svgIcon="home"></mat-icon>

.home-icon {
  color: green;
}

<mat-icon svgIcon="home" class="home-icon"></mat-icon>

この方法では、mat-icon 要素の svgIcon 属性を使用して、アイコンの SVG ファイルを指定し、CSS でスタイルを設定します。

<mat-icon fontSet="fa" fontIcon="fa-home"></mat-icon>

.fa-home {
  color: green;
}

<mat-icon fontSet="fa" fontIcon="fa-home" class="fa-home"></mat-icon>

この方法では、mat-icon 要素の fontSet 属性を使用して、アイコンのフォントセットを指定し、fontIcon 属性を使用してアイコンのフォントアイコンを指定し、CSS でスタイルを設定します。

<mat-icon aria-label="home"></mat-icon>

[aria-label="home"] {
  color: green;
}

<mat-icon aria-label="home"></mat-icon>