【Angular Material】アイコンをCSSでスタイリッシュに！アウトライン表示のテクニック集

Angular Materialでアイコンをアウトライン表示する方法

方法1：mat-icon属性を使う

Angular Materialには、mat-icon属性を使ってアイコンを表示するコンポーネントが用意されています。このコンポーネントには、iconName属性とsvgIcon属性があり、それぞれアイコン名とSVGアイコンファイルを指定できます。

アイコンをアウトライン表示するには、iconName属性にアイコン名の後に_outlinedを付け加えます。例えば、homeアイコンをアウトライン表示するには、mat-icon属性を以下のように記述します。

<mat-icon>home_outlined</mat-icon>

方法2：CSSを使う

mat-iconコンポーネントにCSSを適用して、アイコンをアウトライン表示することもできます。これを行うには、以下のCSSをstyles.cssなどのCSSファイルに記述します。

mat-icon {
  stroke: #000;
  stroke-width: 2px;
  fill: none;
}

このCSSは、すべてのmat-iconコンポーネントに対して、黒色の2ピクセルの太さの枠線で囲み、塗りつぶしをなしにするスタイルを適用します。

どちらの方法を使うべきか

どちらの方法を使うべきかは、状況によって異なります。

• 特定のアイコンのみをアウトライン表示したい場合は、mat-icon属性を使う方法がおすすめです。
• アプリ内のすべてのアイコンをアウトライン表示したい場合は、CSSを使う方法がおすすめです。

<mat-icon>home_outlined</mat-icon>

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

mat-icon {
  stroke: #000;
  stroke-width: 2px;
  fill: none;
}

このコードは、homeアイコンを含むすべてのmat-iconコンポーネントをアウトライン表示します。

以下のコードは、favoriteアイコンとsearchアイコンをそれぞれ異なる色でアウトライン表示する例です。

<mat-icon color="primary">favorite_outlined</mat-icon>
<mat-icon color="accent">search_outlined</mat-icon>

注意事項

• 上記のコードは、Angular Material 10.0.0 を使用していることを前提としています。

mat-iconコンポーネントは、SVGアイコンファイルも指定できます。SVGアイコンファイルは、ベクターグラフィックスであり、サイズを自由に調整することができます。

アイコンをアウトライン表示するには、SVGアイコンファイルでストロークと塗りつぶしの色を調整します。例えば、以下のSVGアイコンファイルは、homeアイコンを黒色の枠線で囲み、塗りつぶしをなしにしたものです。

<svg viewBox="0 0 24 24">
  <path d="M10 12v6h7.5l-2.2 2.2-5.3-5.3Z" stroke="#000" stroke-width="2" fill="none"/>
</svg>

このSVGアイコンファイルをmat-iconコンポーネントに指定するには、以下のコードを使用します。

<mat-icon svgIcon="path/to/home_outlined.svg"></mat-icon>

方法4：Font Awesomeを使う

Font Awesomeは、Webフォントベースのアイコンライブラリです。Angular MaterialはFont Awesomeと互換性があり、Font Awesomeアイコンをmat-iconコンポーネントで使用することができます。

アイコンをアウトライン表示するには、Font AwesomeのCSSクラスを使用します。例えば、以下のコードは、homeアイコンを黒色の枠線で囲み、塗りつぶしをなしにしたものです。

<mat-icon class="fa fa-home fa-fw"></mat-icon>

方法5：Material Design Iconsライブラリを使う

Material Design Iconsは、Googleが提供するアイコンライブラリです。このライブラリには、SVGアイコンとFont Awesomeアイコンの両方が含まれています。

<mat-icon class="material-icons">home_outlined</mat-icon>