AngularマテリアルでカスタムSVGアイコンを使用する方法

序章

Angular Material ライブラリは、マテリアルデザインでスタイル設定されたAngularコンポーネントのスイートを提供します。 そのようなコンポーネントの1つは、<mat-icon>コンポーネントです。 既製のマテリアルアイコンにはさまざまなものがあります。 しかし、マテリアルデザインのスタイルと一貫性を保ちながら、いくつかのカスタムアイコンを表示したい場合はどうでしょうか。 AngularMaterialコンポーネントで独自のSVGアイコンを使用する方法を学びましょう。

このチュートリアルでは、<mat-icon>コンポーネントを使用して、標準のマテリアルアイコンフォントを使用します。 次に、<mat-icon>コンポーネントを使用して、カスタムSVGアイコンをサポートします。

完全に機能するコードは、このGitHubリポジトリにあります。

前提条件

このチュートリアルを完了するには、次のものが必要です。

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

この投稿は、Angularv4.2+の基本的な知識があることを前提としています。

このチュートリアルは元々、Angularv5.2+とAngularMaterialv5.2.4で作成されました。

このチュートリアルは、Angularv10.0.5およびAngularMaterialv10.1.1で検証されました。

Angular Materialを使い始めた場合は、この投稿を参照できます。

ステップ1—Angularプロジェクトの作成と依存関係のインストール

まず、ターミナルを開き、新しいプロジェクトディレクトリを作成します。

mkdir angular-material-custom-svg

次に、新しいディレクトリに移動します。

cd angular-material-custom-svg

次に、npmを使用して、AngularCLIをdevDependencyとしてインストールします。

npm install @angular/[email protected] --save-dev

これで、Angular CLIを使用して新しいAngularプロジェクトを作成し、このチュートリアルのニーズに合わせていくつかのオプションを設定できます。

ng new angular-material-custom-svg --directory=. --skipTests=true --routing=false --style=css

これにより、現在のディレクトリに新しいAngularプロジェクトが作成されます。 次のコマンドを使用して、AngularMaterialとその依存関係をインストールしましょう。

npm install @angular/[email protected] @angular/[email protected] --save

これで、チュートリアルプロジェクトの設定は完了です。 これで、プロジェクトでマテリアルアイコンを引き続き使用できます。

ステップ2—アイコンフォントで<mat-icon>を使用する

デフォルトのマテリアルアイコンを使用するには、最初にグローバルスタイルシートにインポートする必要があります。 これを行うには、styles.cssファイル（Angular CLIによって生成されたもの）を開きます。

nano src/styles.css

ファイルの内容を次のimportステートメントに置き換えます。

src / style.css

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

次に、MatIconModuleをインポートする必要があります。 app.module.tsファイルを開きます。

nano src/app.module.ts

次に、MatIconModuleにimportを追加します。

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";

そして、それをモジュールのimportsの配列に追加します。

src / app / app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

これで、<mat-icon>コンポーネントで組み込みのマテリアルアイコンを使用できるようになりました。 アイコンのテキスト名を追加すると、関連するアイコンのグリフが表示されます。

このチュートリアルでは、"mood"アイコンを追加します（これは笑顔の顔のシンボルに似ています）。

マテリアルデザインのウェブサイトには、直接使用できるマテリアルアイコンの完全なリストがあります。

app.component.htmlファイルを開きます。

nano src/app/app.component.html

ファイルの内容を次のコード行に置き換えます。

src / app / app.component.html

<mat-icon>mood</mat-icon>

これまでのところを見てみましょう！ アプリケーションを起動します。

ng serve

Webブラウザ（localhost:4200）でアプリケーションを表示すると、"mood"アイコンが表示されます。

これで、<mat-icon>を使用してアイコンフォントを表示することはできません。 <mat-icon>を使用してSVGを表示し続けることができます。

ステップ3—SVGで<mat-icon>を使用する

カスタム"unicorn"アイコンをプロジェクトに追加しましょう。

注： The NounProjectでユニコーンSVGアイコンを取得できます。 無料の基本的な使用法は、ライセンス要件ごとにアイコンの作成者を帰属させる必要があります。

アイコンをunicorn_icon.svgとしてプロジェクトのsrc/assetsフォルダーに保存します。

<mat-icon>コンポーネントタグでカスタムユニコーンアイコンを使用するには、HttpClientModuleをインポートする必要があります。

app.module.tsファイルを開きます。

nano src/app/app.module.ts

次に、HttpClientModuleにimportを追加します。

src / app / app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MatIconModule } from "@angular/material/icon";
import { HttpClientModule } from "@angular/common/http";

そして、それをモジュールのimportsの配列に追加します。

src / app / app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

これで、カスタム"unicorn"アイコンをAngularMaterialが提供するMatIconRegistryサービスに登録できます。

app.component.tsを開きます：

nano src/app/app.component.ts

次に、MatIconRegistryにimportを追加します。

src / app / app.component.ts

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";

そして、サービスのインジェクションをコンポーネントに追加します。

src / app / app.component.ts

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    // ...
  }
}

addSvgIconメソッドをコンポーネントのconstructorメソッドに追加します。

src / app / app.component.ts

export class AppComponent{
  constructor(private matIconRegistry: MatIconRegistry){
    this.matIconRegistry.addSvgIcon(
      `icon_label`,
      `path_to_custom_icon.svg`
    );
  }
}

addSvgIconメソッドは、2つの引数を取ることによってアイコンを登録します。

最初の引数は、stringタイプのアイコンラベルです。

2番目の引数は、アイコンファイルの場所を指す相対URLパスです。

このURLパス文字列のタイプはSafeResourceUrlです。 URLパス文字列をSafeResourceUrlに解析するために、Angularが提供するDomSanitizerを利用できます。

次に、DomSanitizerにimportを追加します。

src / app / app.component.ts

import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material/icon";
import { DomSanitizer } from "@angular/platform-browser";

そして、サービスのインジェクションをコンポーネントに追加します。

src / app / app.component.ts

export class AppComponent{
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon(
      `icon_label`,
      `path_to_custom_icon.svg`
    );
  }
}

相対URLパス文字列を指定すると、DomSanitizerのbypassSecurityTrustResourceUrlメソッドは、addSvgIconメソッドに必要な安全なリソースURLを返します。

これで、icon_labelをカスタム"unicorn"ラベルに置き換えることができます。 そして、カスタム"unicorn_icon.svg"アイコンが付いたpath_to_custom_icon.svg。

addSvgIconの行を更新しましょう。

src / app / app.component.ts

export class AppComponent{
  constructor(
    private matIconRegistry: MatIconRegistry,
    private domSanitizer: DomSanitizer
  ){
    this.matIconRegistry.addSvgIcon(
      "unicorn",
      this.domSanitizer.bypassSecurityTrustResourceUrl("../assets/unicorn_icon.svg")
    );
  }
}

これで、カスタム"unicorn"アイコンがMatIconRegistryサービスに正しく登録されました。

カスタムアイコンを表示するには、コンポーネントのテンプレートを更新する必要があります。 app.component.htmlを開きます：

nano src/app/app.component.html

そして、アイコンラベルを<mat-icon>のsvgIcon入力プロパティに渡します。

src / app / app.component.html

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

あなたがこれまでに持っているものを見てみましょう！ アプリケーションを起動します。

ng serve

Webブラウザ（localhost:4200）でアプリケーションを表示すると、カスタムアイコンがマテリアルスタイルで表示されていることがわかります。

これで、マテリアルスタイルを使用して、アプリにカスタムアイコンのフルセットを表示できるようになりました。

コードをよりクリーンで保守しやすくするために、MatIconRegistryをサービスクラスに移動してコードをリファクタリングできます。

結論

このチュートリアルでは、AngularMaterialの<mat-icon>コンポーネントをMaterialIconsフォントとカスタムSVGで使用するための最初の調査を完了しました。 これにより、アプリケーション全体でマテリアルデザインのスタイルを一貫して順守することができます。

Angularについて詳しく知りたい場合は、Angularトピックページで演習とプログラミングプロジェクトを確認してください。

マテリアルデザインについて詳しく知りたい場合は、公式ドキュメントをご覧ください。