Angular Material Icon（10分で作成）

アイコン作成

icon

今回はマテリアル　アイコンです。
使い方はとてもシンプルです。
エデイタは、Visual Studio Code です。
まず、マテリアルコンポーネント専用ファイル、
cmaterial.module.tsを開きます。
①、MatIconModuleをインポートします。
そして、 ②、@NgModuleの
imports:[]　と
exports:[]　に、
MatIconModule　を書き入れます。
下はそのコードです。


  
import { NgModule } from "@angular/core";
//①記入箇所
import {MatIconModule} from '@angular/material/icon';

@NgModule({
//②記入箇所
 imports:[MatIconModule],
 exports:[MatIconModule]
　})
export class CmaterialModule{}

cmaterial.module.tsファイルの変更はこれでＯＫです。
次に、
app.component.html　を開きます。
デモ表示用にすでにデフォルトのコードが挿入されていますが、
練習のため、すべて削除します。
代わりに、
<mat-icon >home</mat-icon>
を記入します。
コードは下記になります。


  
<div style="text-align: center;">
<h1>homeアイコンを表示</h1>
<br/>
//①記入箇所
<mat-icon >home</mat-icon>
<br/>
//②記入箇所
<mat-icon aria-hidden="false" aria-label="home icon">home</mat-icon>
</div>

②記入箇所の
aria-hidden="false" aria-label="home icon"
というのは、
aria-hiddenがWEBページ音声読み上げ利用時、
読み上げるのを防止するタグ。
aria-label は、要素のラベル付けを定義します。
コード記入の終了後、
ng serve　コマンドで、HTMLを表示します。
一番上の画像でお分かりのように、
アイコン表示は、同じになります。
以上です。