Googleマテリアルアイコンとは
Googleマテリアルアイコンとは、Googleが提供しているアイコンフォントです。
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...
fonts.google.com
使うための準備
Googleマテリアルアイコンを使うためには、head要素の中にlink要素を記述します
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Googleマテリアルアイコンは5つのテーマが用意されています。使いたいテーマごとにlink要素の内容を変更します。
Outlined（輪郭線）
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">Filled（塗りつぶし）
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">Rounded（角丸）
<link href="https://fonts.googleapis.com/css?family=Material+Rounded" rel="stylesheet">Sharp（角が四角）
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone" rel="stylesheet">Two-Tone（2色）
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" rel="stylesheet">もし、複数のテーマを使いたい場合は以下のように「|」で区切って複数を指定することができます。
Outlined（輪郭線）＋ Rounded（角丸）
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined|Material+Rounded" rel="stylesheet">すべて
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
使い方
Googleマテリアルアイコンのサイトへで使いたいアイコンを選びます。
アイコンを選択すると、HTMLタグをコピーして自分のWEBページの表示させたいところへ貼り付ければOKです！
See the Pen 20211217_01 by Tadafumi Ito (@suzuran_code) on CodePen.
サイズを変更する
CSSを使ってサイズを変更することができます。
See the Pen 20211217_02 by Tadafumi Ito (@suzuran_code) on CodePen.
色を変更する
CSSを使って色を変更することができます。
See the Pen 20211217_03 by Tadafumi Ito (@suzuran_code) on CodePen.
