Material Icons (All Themes) Sample
本ページの目的
Icons - Material Design のアイコンをテーマ別に使用する。
テーマは以下の5種類ある
- Filled
- Outlined
- Rounded
- Two-Tone
- Sharp
CSSファイルの読み込み
以下の記述ですべてのテーマが使える。
すべてのテーマ (launch link)
<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">個別に読み込む場合は以下となる
Filled (launch link)
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">Outlined (launch link)
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">Rounded (launch link)
<link href="https://fonts.googleapis.com/css?family=Material+Rounded" rel="stylesheet">Two-Tone (launch link)
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone" rel="stylesheet">Sharp (launch link)
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" rel="stylesheet">追加のスタイル
以下のスタイルを追加しておくと、サイズ・色をCSSクラスで変えることができてラク。
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
- 上記は
.material-iconsクラスに対してのみ定義しているが、必要に応じて.material-icons-outlinedクラスなどに対しても定義する。 - 例えば、
<i class="material-icons md-18">stars</i>と記述すれば font-size が 18px でアイコン表示できる。→ stars - 参照元：Material Icons Guide - Google Design
アイコンの記述と表示 (Theme 毎)
| launch アイコン | account_box アイコン | donut_small アイコン | |
| Filled |
<i class="material-icons">launch</i>launch |
<i class="material-icons">account_box</i>account_box |
<i class="material-icons">donut_small</i>donut_small |
|---|---|---|---|
| Outlined |
<i class="material-icons-outlined">launch</i>launch |
<i class="material-icons-outlined">account_box</i>account_box |
<i class="material-icons-outlined">donut_small</i>donut_small |
| Rounded |
<i class="material-icons-round">launch</i>launch |
<i class="material-icons-round">account_box</i>account_box |
<i class="material-icons-round">donut_small</i>donut_small |
| Two-Tone |
<i class="material-icons-two-tone">launch</i>launch |
<i class="material-icons-two-tone">account_box</i>account_box |
<i class="material-icons-two-tone">donut_small</i>donut_small |
| Sharp |
<i class="material-icons-sharp">launch</i>launch |
<i class="material-icons-sharp">account_box</i>account_box |
<i class="material-icons-sharp">donut_small</i>donut_small |
メモ
- テーマによってデザインが変わらないアイコンもある。
- <link>で Material Icons を直接読み込むと、CWV のスコアがかなり下がってしまう。