メインコンテンツへスキップ

Jetpack Compose における Material Icons の使い方

🎉 はじめに

Jetpack Compose では Material Icons を簡潔に利用できる API が提供されている。 ただし、Google Fonts Icons との関係や、Compose 内部での扱いを正しく理解していないと、 「どう探すのか？」「どう呼び出すのか？」で迷いやすい。

この記事では以下をまとめる：

  1. アイコンの探し方
  2. 設定できる主要パラメータ
  3. 実務で使えるコード例

🔎 ① アイコンの探し方

Material Icons は数が膨大で、Android Studio の補完は実務では弱い。 実際には次の 2 ステップで探すと最も効率が良い。

🌐 A. Google Fonts Icons で見た目と名前を調べる

https://fonts.google.com/icons

ここでは：

  • 視覚的にアイコン一覧を確認
  • 適切な名前を検索（例：kitchen, delete, arrow）
  • テーマ（Filled / Outlined / Rounded…）ごとのデザインを確認

Google Fonts のサイトは「見た目 → 名前」を知る辞書だと思えばよい。

🧭 B. Compose では Icons.<テーマ>.<名前> で呼び出す

例：

  • Icons.Filled.Kitchen
  • Icons.Outlined.Delete
  • Icons.AutoMirrored.Filled.ArrowBack

この構造さえ覚えておけば十分。

✔ C. Compose に存在するかの最終確認方法

  • Icons.Filled. と打って補完を確認
  • 公式 package-summary を参照
  • 必要ならリフレクションで一覧を抽出（開発者向け）

🎛 ② 設定できるパラメータ

🎨 imageVector

表示したいアイコン自体を指定する。

📝 contentDescription

TalkBack などのアクセシビリティ用説明文。 意味がない場合は null。

🎚 modifier

サイズ調整・余白・位置合わせに使用。

🎨 tint

色を指定する。

tint = Color.Red
tint = MaterialTheme.colorScheme.primary

💻 ③ コードスニペット集（Markdownで読みやすく調整済み）

▶ 基本的なアイコン表示

Icon(
    imageVector = Icons.Filled.Home,
    contentDescription = "ホーム"
)

▶ 色とサイズのカスタマイズ

Icon(
    imageVector = Icons.Outlined.Delete,
    contentDescription = "削除",
    tint = Color.Red,
    modifier = Modifier.size(28.dp)
)

▶ AutoMirrored（RTL対応）

Icon(
    imageVector = Icons.AutoMirrored.Filled.ArrowBack,
    contentDescription = "戻る"
)

RTL (右→左言語) 環境では自動で左右反転する。

▶ IconButton と組み合わせる（最頻出パターン）

IconButton(onClick = { /* 処理 */ }) {
    Icon(
        imageVector = Icons.Filled.Settings,
        contentDescription = "設定"
    )
}

▶ テキストと横並び（Row）

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Icon(
        imageVector = Icons.Filled.Info,
        contentDescription = "情報",
        tint = MaterialTheme.colorScheme.primary
    )
    Spacer(modifier = Modifier.width(8.dp))
    Text("詳細情報")
}

▶ 外部 SVG を VectorAsset として使う場合

Icon(
    painter = painterResource(id = R.drawable.ic_freezer),
    contentDescription = "冷凍庫"
)

Material Icons に存在しないアイコン（食品・家電・業務系）は SVG 導入で補完する。

🎯 まとめ

  • アイコンの見た目と名前は Google Fonts Icons で探す
  • Compose では Icons.テーマ.名前 の定型で呼び出す
  • tint・size・contentDescription などで柔軟に調整できる
  • 特殊アイコンは SVG を取り込むことで解決

この記事のパターンを知っておけば、Compose でアイコン周りに迷うことはほぼ無くなる。

上に戻る