月間26,000PV達成! 収益は毎日発生中! ギランバレー症候群に関する情報を集めています

【Angular】Material Iconの使い方!種類が豊富っす!

【Angular】Material Iconの使い方!種類が豊富っす!
Advertisement

 

AngularのMaterialデザインっていいっすね

デザイン苦手でも、Materialデザイン使ってるだけで良い感じの雰囲気になるので。これがAngularの良さっすね。

ということで今回は表題の通り、Material Iconの使い方を解説したいと思います。

 

 

僕のPC環境

OS:Windows10

Angular:7

 

 

Material Icon導入方法

Materialデザインをインストール

以下を参照。

 

MatIconModuleをインポート

MatIconModule」をインポートします。

 

index.htmlに「Material+Icons」を記載

以下は「index.html」に記載されていない場合のみです。

 

 

Advertisement

 

Material Iconを使ってみる

以下のように使うだけです。

 

 

Material Iconの種類

以下のサイトが参考になります。

■Icons – Material Design

URL:「https://material.io/tools/icons/?icon=accessibility&style=baseline」

ここに記載されているものは使えるようですね。

使い方は先ほどの「home」の部分を使いたいアイコン名に変更するだけです。

 

 

おすすめ書籍

僕はAngularの勉強をするのに以下の書籍を購入しました。おすすめですよ!

 

 

 

まとめ

Iconを使うことで、画面のレイアウト的にも「素敵やん」状態になります。

というよりは、アイコンがあると、「何をするものなのか」が一目瞭然になります。

これだけ簡単に使えるのあれば、ガンガン使うべきですね。

ではまた!

Travelerを知らないの?