序章

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

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

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

前提条件

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

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

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

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

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

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

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

  1. mkdir angular-material-custom-svg

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

  1. cd angular-material-custom-svg

次に、 npm AngularCLIを devDependency:

  1. npm install @angular/cli@10.0.4 --save-dev

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

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

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

  1. npm install @angular/material@10.1.1 @angular/cdk@10.1.1 --save

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

ステップ2—使用 <mat-icon> アイコンフォント付き

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

  1. nano src/styles.css

ファイルの内容を次のように置き換えます import 声明：

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

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

  1. nano src/app.module.ts

次に、 import 為に MatIconModule:

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 ファイル：

  1. nano src/app/app.component.html

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

src / app / app.component.html
<mat-icon>mood</mat-icon>

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

  1. ng serve

Webブラウザでアプリケーションを表示します（localhost:4200）、そしてあなたは見るでしょう "mood" アイコン。

これで、 <mat-icon> アイコンフォントを表示します。 引き続き使用できます <mat-icon> SVGを表示します。

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

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

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

アイコンを名前を付けて保存 unicorn_icon.svg に src/assets プロジェクトのフォルダ。

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

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

  1. nano src/app/app.module.ts

次に、 import 為に HttpClientModule:

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" アイコンと MatIconRegistry AngularMaterialが提供するサービス。

開ける app.component.ts:

  1. nano src/app/app.component.ts

次に、 import 為に MatIconRegistry:

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`
    );
  }
}

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

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

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

このURLパス文字列のタイプは SafeResourceUrl. URLパス文字列を解析するには SafeResourceUrl、私たちは利用することができます DomSanitizer Angularによって提供されます。

次に、 import 為に DomSanitizer:

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パス文字列を指定すると、 bypassSecurityTrustResourceUrl 上の方法 DomSanitizer 安全なリソースURLを返します。これは、 addSvgIcon 方法。

今、あなたは置き換えることができますicon_label カスタムで "unicorn" ラベル。 と path_to_custom_icon.svg カスタムで "unicorn_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:

  1. nano src/app/app.component.html

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

src / app / app.component.html
<mat-icon svgIcon="unicorn"></mat-icon>

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

  1. ng serve

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

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

コードをよりクリーンで保守しやすくするために、 MatIconRegistry サービスクラスに。

結論

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

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

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