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

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

  • 2019年3月24日
  • 2021年3月19日
  • Angular
  • 76view

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

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

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

Material Icon導入方法

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

以下を参照。

関連記事

AngularとMaterialデザインの組み合わせって素晴らしいーー。 AngularはGoogleが開発したフレームワークなので、Materialデザインを惜しみなく使うことができます。 ということで今回は、Angularで[…]

【Angular7】Materialデザインの使い方を解説!

MatIconModuleをインポート

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

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

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

Material Iconを使ってみる

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

Material Iconの種類

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

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

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

おすすめ書籍

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

まとめ

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

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

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

ではまた!

【Angular】Material Iconの使い方!種類が豊富っす!
フォローしてもらえると泣いて喜びます