material-design-3-icons

Material Design 3 アイコンと Material Symbols

概要

このスキルでは、Material Symbols を使用して Material Design 3（M3）アイコンを実装する方法を説明します。Material Symbols は Google の可変フォントアイコンシステムで、フォントのバリエーション軸による動的なカスタマイズが可能な 2,500 種類以上のアイコンを提供します。

キーワード: Material Design 3、M3、アイコン、Material Symbols、可変フォントアイコン、アイコンのガイドライン、アイコンのアクセシビリティ、アイコンのサイズ、塗りつぶしアイコン、アウトラインアイコン

基本原則

アイコンの理念

M3 アイコンは、次のことを実現できるように設計されています。

1. 明確に伝える: アイコンは一目で認識でき、誰にでも理解できる必要があります
2. 動的に適応する: 可変フォント技術により、リアルタイムでカスタマイズできます
3. テーマをサポートする: アイコンは M3 のカラーシステムとサイズシステムに適応します
4. アクセシビリティを高める: アイコンは重要な操作のテキストラベルを補足します（置き換えることはありません）
5. ブランドを表現する: アイコンのウェイト、塗りつぶし、スタイルを調整して、ブランドの個性に合わせられます

Material Symbols

3 種類のアイコンスタイル

Material Symbols には、それぞれ異なる視覚的な特徴を持つ 3 種類のスタイルがあります。

スタイル	特徴	用途
アウトライン	すっきりと軽やか	ほとんどのインターフェースでのデフォルト
ラウンド	柔らかく親しみやすい	親しみやすさを重視するカジュアルな場面
シャープ	精密で幾何学的	技術的、専門的な場面

可変フォント軸

Material Symbols では、動的なカスタマイズに 4 つの可変フォント軸を使用します。

軸	プロパティ	範囲	デフォルト	効果
FILL	塗りつぶし	0–1	0	アウトライン（0）から塗りつぶし（1）
wght	ウェイト	100–700	400	ストロークの太さ
GRAD	グレード	-25–200	0	サイズを変えずにウェイトを微調整
opsz	光学サイズ	20–48	24	サイズに応じてストロークを最適化

実装

Material Symbols の読み込み

<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />


<link rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

基本的な使い方

<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">settings</span>

CSS の設定

/* Base icon styles */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
}

可変フォント軸を使ったカスタマイズ

/* Default icon (outlined, regular weight) */
.icon-default {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Filled icon */
.icon-filled {
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* Bold icon */
.icon-bold {
  font-variation-settings:
    'FILL' 0,
    'wght' 700,
    'GRAD' 0,
    'opsz' 24;
}

/* Light icon */
.icon-light {
  font-variation-settings:
    'FILL' 0,
    'wght' 200,
    'GRAD' 0,
    'opsz' 24;
}

/* Small icon (optimized for 20dp) */
.icon-small {
  font-size: 20px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20;
}

/* Large icon (optimized for 48dp) */
.icon-large {
  font-size: 48px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 48;
}

アイコンのサイズ

標準サイズ

M3 では、光学サイズ軸と組み合わせる標準的なアイコンサイズが定義されています。

サイズ	用途	光学サイズ（opsz）
20dp	高密度のレイアウト、小さなコントロール	20
24dp	デフォルト、ほとんどのコンポーネント	24
40dp	大きなボタン、注目させる操作	40
48dp	ヒーローアイコン、空の状態	48

コンポーネントを使ったサイズ指定

/* Icon in a button */
.md3-button .material-symbols-outlined {
  font-size: 18px;
  font-variation-settings: 'opsz' 20;
}

/* Icon in navigation */
.md3-nav-item .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in FAB */
.md3-fab .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'opsz' 24;
}

/* Icon in large FAB */
.md3-fab-large .material-symbols-outlined {
  font-size: 36px;
  font-variation-settings: 'opsz' 40;
}

アイコンの色

アイコンには M3 のカラー トークンを使用し、親要素から色を継承します。

/* Default icon color */
.icon-default {
  color: var(--md-sys-color-on-surface);
}

/* Icon on primary background */
.icon-on-primary {
  color: var(--md-sys-color-on-primary);
}

/* Icon as interactive element */
.icon-interactive {
  color: var(--md-sys-color-on-surface-variant);
}

.icon-interactive:hover {
  color: var(--md-sys-color-on-surface);
}

/* Active/selected icon */
.icon-active {
  color: var(--md-sys-color-primary);
  font-variation-settings: 'FILL' 1;
}

/* Disabled icon */
.icon-disabled {
  color: var(--md-sys-color-on-surface);
  opacity: 0.38;
}

/* Error icon */
.icon-error {
  color: var(--md-sys-color-error);
}

塗りつぶしの切り替え

選択状態を示すには塗りつぶしを使い、アウトラインから塗りつぶしへ切り替えます。

/* Toggle fill on selection */
.icon-toggle {
  font-variation-settings: 'FILL' 0;
  transition: font-variation-settings 200ms var(--md-sys-motion-easing-standard);
}

.icon-toggle[aria-selected="true"],
.icon-toggle.selected {
  font-variation-settings: 'FILL' 1;
}

よく使われる塗りつぶしパターン

コンポーネント	未選択	選択済み
ナビゲーションアイコン	FILL 0	FILL 1
お気に入り／いいね	FILL 0	FILL 1、色: error
チェックボックスアイコン	FILL 0	FILL 1、色: primary
ブックマーク	FILL 0	FILL 1
タブアイコン	FILL 0	FILL 1、色: primary

強調のためのグレード

グレードはアイコンのサイズを変えずにウェイトを調整します。レイアウトをずらさずに強調する場合に便利です。

/* Low emphasis icon */
.icon-low-emphasis {
  font-variation-settings: 'GRAD' -25;
}

/* High emphasis icon (dark text on light bg) */
.icon-high-emphasis {
  font-variation-settings: 'GRAD' 200;
}

/* Adjust grade for dark mode */
[data-theme="dark"] .material-symbols-outlined {
  font-variation-settings: 'GRAD' -25;
}

アクセシビリティ

要件

1. 装飾的なアイコン: アイコンにテキストが添えられている場合は、aria-hidden="true" を使用します
2. 単独のアイコン: アイコンを単独で使用する場合は、aria-label または title を指定します
3. 操作可能なアイコン: アクセシブルな名前を持つ <button> で囲みます
4. タッチターゲット: アイコンの見た目のサイズにかかわらず、タッチターゲットを最低 48×48dp にします

実装

<button>
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
  Delete
</button>


<button aria-label="Delete item">
  <span class="material-symbols-outlined" aria-hidden="true">delete</span>
</button>


<span class="material-symbols-outlined" aria-hidden="true">info</span>
<span>More details available</span>

アイコンボタンのタッチターゲット

.md3-icon-button {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--md-sys-shape-corner-full);
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
}

/* The icon itself can be smaller than the touch target */
.md3-icon-button .material-symbols-outlined {
  font-size: 24px;
}

ベストプラクティス

推奨事項

1. ✅ 一貫した M3 アイコンのスタイルには Material Symbols を使用します
2. ✅ アイコンのウェイトを周囲のタイポグラフィのウェイトに合わせます
3. ✅ 表示されるアイコンのサイズに適した光学サイズ（opsz）を使用します
4. ✅ 選択状態を示すには塗りつぶしの切り替えを使用します
5. ✅ 単独で操作可能なアイコンにはアクセシブルなラベルを指定します
6. ✅ テキストに添える装飾的なアイコンには aria-hidden="true" を使用します
7. ✅ ダークモードではグレードを調整します（コントラストを高めるには少し負の値にします）
8. ✅ アイコンの色には M3 のカラー トークンを使用します

避けるべきこと

1. ❌ 主要なナビゲーションや重要な操作で、テキストラベルなしのアイコンを使用しないでください
2. ❌ 同じインターフェース内で Material Symbols のスタイル（アウトライン、ラウンド、シャープ）を混在させないでください
3. ❌ CSS の transform: scale() でアイコンのサイズを変更しないでください。代わりに font-size と opsz を使用してください
4. ❌ インターフェース内でウェイトを統一してください
5. ❌ 状態の伝達をアイコンの色だけに頼らないでください
6. ❌ 20dp 未満のアイコンを使用しないでください
7. ❌ アイコンボタンのタッチターゲット要件を無視しないでください

アイコン実装のチェックリスト

M3 アイコンを実装する際は、次の点を確認してください。

• Material Symbols フォントが読み込まれている（アウトライン、ラウンド、シャープのいずれかを選択）
• バリアブルフォントの軸（FILL、wght、GRAD、opsz）が設定されている
• オプティカルサイズがレンダリングサイズと一致している（20dp → opsz 20、24dp → opsz 24 など）
• アイコンのウェイトが周囲のテキストのウェイトと一致している
• ナビゲーションやトグルで、塗りつぶしの切り替えによって選択状態が示されている
• ダークモード用にグレードが調整されている
• 単独で使用するすべてのアイコンに、アクセシブルなラベル（aria-label）が設定されている
• 装飾用アイコンに aria-hidden="true" が設定されている
• インタラクティブなアイコンが適切なインタラクティブ要素（button、a）で囲まれている
• アイコンボタンのタッチターゲットが最小 48×48dp である
• アイコンに M3 のカラートークン（on-surface、primary、error など）が使用されている
• インターフェース全体でアイコンのスタイルが 1 種類だけ使用されている
• 明確さが必要な場合、アイコンにテキストラベルが添えられている

リソース

• Material Symbols：https://fonts.google.com/icons
• M3 アイコンの概要：https://m3.material.io/styles/icons/overview