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

Material Symbols の使い方

🎉 はじめに

Material You 時代の最新アイコンシステムである Material Symbols は、従来の Material Icons と異なり、 「太さ」「塗りつぶし」「角丸度」などを自由に調整できるのが最大の特徴である。

Jetpack Compose でも FontFamily として利用する方式が正式サポートされており、 1つのアイコンフォントで多様な表現を作り出すことができる。

この記事では：

  1. Material Symbols の基本
  2. アイコンの探し方
  3. Compose における設定方法
  4. 調整できるパラメータ（weight / fill / grade / opticalSize）
  5. コード例

をまとめる。

🔎 ① Material Symbols とは何か

Material Icons の後継となる可変式アイコンフォント。 以下を 単一のアイコンで可変調整できる。

  • weight（太さ）：100〜700
  • fill（塗りつぶし）：0 or 1
  • grade（視認性調整）：-25〜200
  • opticalSize（サイズ調整）：20〜48

CSS の可変フォント（variable font）と同じ仕組みで、1ファイルで多表現を生成できる。

🌐 ② アイコンの探し方

Material Symbols の辞書サイト：

Google Fonts Material Symbols

https://fonts.google.com/icons?icon.set=Material+Symbols

ここでは：

  • Symbols 専用のアイコンを検索
  • Fill / Weight などをプレビュー
  • ダウンロードも可能

従来の Material Icons と名前が共通しているものも多いが、Symbols の方が表現幅が広い。

🎛 ③ Compose での利用方法

Material Symbols は「フォントアイコン」として使うため、 Compose では FontFamily + Text または Icon + painterResource(FontFamily) の方式で利用する。

必要な依存関係（Compose 1.5+）

implementation("androidx.compose.material:material-icons-extended")
implementation("androidx.compose.ui:ui-text")

また、Material Symbols の可変フォント（woff2）を res/font/ に配置し、 fontFamily を定義する。

🧩 ④ パラメータで調整できる4種類

Material Symbols で調整可能な可変パラメータは次の 4 種類。

1. weight（太さ）

100 〜 700 細字 → 太字 を連続的に変更。

fontVariationSettings = "wght" 700

2. fill（塗りつぶし）

0：線 1：塗りつぶし

fontVariationSettings = "FILL" 1

3. grade（視認性）

視認性や背景とのコントラスト調整。

fontVariationSettings = "GRAD" 200

4. opticalSize（最適レンダリングサイズ）

20〜48 を推奨。

fontVariationSettings = "opsz" 48

これらを組み合わせることで、同じアイコンでもまったく違う表現が可能。

💻 ⑤ 実際の Compose コード例

▶ FontFamily の定義

val MaterialSymbols = FontFamily(
    Font(
        resId = R.font.material_symbols,
        weight = FontWeight.Normal,
        style = FontStyle.Normal
    )
)

※ material_symbols.woff2 を res/font に置く。

▶ Text でアイコンを描く（最も簡単）

Text(
    text = "\uE8B8", // settings アイコンのコードポイント
    fontFamily = MaterialSymbols,
    fontSize = 32.sp,
    modifier = Modifier.padding(8.dp),
    style = TextStyle(
        fontVariationSettings = "\"FILL\" 1, \"wght\" 600, \"GRAD\" 0, \"opsz\" 48"
    )
)

▶ Icon と組み合わせる場合

Icon(
    painter = rememberFontPainter(
        fontFamily = MaterialSymbols,
        icon = "\uE8B8", // settings
        fontVariationSettings = "\"FILL\" 1, \"wght\" 400"
    ),
    contentDescription = "設定",
    modifier = Modifier.size(32.dp)
)

▶ weight の違い比較（例）

Row {
    Text("\uE8B8", fontFamily = MaterialSymbols,
        style = TextStyle(fontVariationSettings = "\"wght\" 200"))
    Text("\uE8B8", fontFamily = MaterialSymbols,
        style = TextStyle(fontVariationSettings = "\"wght\" 400"))
    Text("\uE8B8", fontFamily = MaterialSymbols,
        style = TextStyle(fontVariationSettings = "\"wght\" 700"))
}

🎨 ⑥ なぜ Material Symbols が便利なのか

  • デザイン統一がしやすい 必要に応じて細さや塗りつぶしを調整でき、UI のトーンに合わせられる。

  • 複数のアイコンファイルを用意しなくて済む weight や fill 別に SVG を用意する必要がない。

  • Material You と視覚的一貫性が高い Android 12+ のダイナミックカラーにもフィットしやすい。

アイコンを UI トーンに「合わせる」ことができるのは Symbols 最大の強み。

🎯 まとめ

Material Symbols は以下が特徴：

  • weight / fill / grade / opticalSize の可変調整が可能
  • 1つのフォントで多様なアイコン表現を作れる
  • Compose では FontFamily を使って Text または Icon として描画
  • Google Fonts Icons の Symbols タブで検索可能

この仕組みを理解しておくと、 UI デザインの自由度が大きく向上し、アプリの世界観を統一しやすくなる。

上に戻る