Material Icons テーマについて
🎉 はじめに
この記事では Jetpack Compose で利用する Material Icons の基本 を体系的に整理する。
マテリアルアイコンには複数の「テーマ（Filled / Outlined / …）」があり、同じアイコン名でも複数の見た目が存在する。
さらに、AutoMirrored のように RTL（右→左）環境で自動反転する特殊テーマもある。
ここでは、
- Material Icon の構造とテーマの意味
- よく使う代表アイコンがどのテーマに存在するかの一覧表 をまとめる。
Material Icons の全種類を網羅すると膨大になるため、Compose アプリ開発で実際に使用頻度の高いアイコンを中心に掲載している。
🔤 Material Icons の基本構造
Material Icons は Google が提供する公式アイコンセットで、Compose では下記のようなテーマごとに分類されている。
- Filled
- Outlined
- Rounded
- TwoTone
- Sharp
- AutoMirrored（＋上記テーマの組み合わせ）
テーマはどれも同じ概念を表すアイコンを持つが、デザイン（太さ・角の丸み・線の有無）が異なるだけである。 例えば、Filled.Home と Outlined.Home は形状は同じだがスタイルが異なる。
すべてのアイコンがすべてのテーマを持つとは限らない。 古いアイコンや特殊アイコンはテーマが限定されることがある。
🧭 RTL 対応：AutoMirrored とは何か
ArrowBack のように 左右の向きが意味を持つアイコン は、アプリが RTL 言語（アラビア語／ヘブライ語など）で表示された際に 自動で反転 することが望ましい。
Compose では Icons.AutoMirrored.{Theme}.xxx を使うと、対応アイコンが RTL 自動反転に切り替わる。
例
Icons.Filled.ArrowBack（反転しない）Icons.AutoMirrored.Filled.ArrowBack（RTL で矢印が反転する）
ナビゲーション系の矢印は AutoMirrored を使うことが推奨される。
📚 よく使う Material Icons のテーマ対応一覧
以下は Compose アプリでよく使われる代表的なアイコンを取り上げ、 行＝アイコンの種類、列＝テーマ（Filled / Outlined / …） として、対応の有無（〇／×）をまとめた表である。
※ Google Fonts の Material Icons / Compose Material Icons をもとに構成。
🗂 代表アイコン × テーマ対応表
🏠 ナビゲーション・UI 基本要素
凡例 〇：そのテーマにアイコンが存在する ×：存在しない（公開されていない）
| アイコン名 | Filled | Outlined | Rounded | TwoTone | Sharp | AutoMirrored |
|---|---|---|---|---|---|---|
| Home | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| ArrowBack | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| ArrowForward | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| Menu (MoreVert / MoreHoriz 系含む) | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Search | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Close | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Check | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Settings | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Add (＋) | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Delete | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Edit | 〇 | 〇 | 〇 | 〇 | 〇 | × |
| Favorite | 〇 | 〇 | 〇 | 〇 | 〇 | × |
📌 AutoMirrored が特に重要なアイコン（左右系）
| アイコン名 | Filled | Outlined | Rounded | TwoTone | Sharp | AutoMirrored |
|---|---|---|---|---|---|---|
| ArrowBack | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| ArrowForward | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| KeyboardArrowLeft | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| KeyboardArrowRight | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| ChevronLeft | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
| ChevronRight | 〇 | 〇 | 〇 | 〇 | 〇 | 〇 |
AutoMirrored が存在するアイコンは「左右方向を示す系」が中心。
📝 補足：なぜテーマによって存在しないアイコンがあるのか？
Google の Material Icons は段階的に増えており、
- 初期アイコンはすべてのテーマに揃っている
- 後から追加されたアイコンは Filled のみ（または Limited）の場合がある
- AutoMirrored は「方向性のあるアイコン」のみ
という設計方針があるため。
📌 まとめ
この記事では Material Icons のテーマと、代表アイコンのテーマ対応状況をまとめた。 Compose でアイコンを選ぶ際に、
- どのテーマに存在するか
- RTL 対応（AutoMirrored）が必要か
- ブランドイメージに合うテーマはどれか
を判断する基盤として使える。