2025/9/4

【Jetpack Compose/Android】マテリアルアイコンの使用方法！Iconの種類

この記事からわかること

Kotlin/Android Jetpack Composeのマテリアルアイコンの使い方
Iconクラスの実装方法と種類

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Narwhal Feature Drop
Android OS：15以降
Kotlin：2.2.21
Material3
AGP：8.12.3
Gradle：8.13
macOS(M1)：Tahoe 26.0.1

Jetpack Composeでのアイコン実装

公式リファレンス：androidx.compose.material.icon

AndroidのJetpack Composeではリソースを明示的に追加しなくても簡単にコードからベクター形式のマテリアルアイコンが使用できるようになっています。XMLベースのUI開発の場合はいちいちアイコンを追加する必要がありましたが、その作業を省くことができるのは開発者として非常に嬉しいことかなと思います。

ComposeではComposable関数としてIconが用意されており、tintで簡単に色を変えることができるようになっています。アイコンとして表示するベクター画像はIconsオブジェクトから色々指定できるようになっています。

Icon(
    imageVector = Icons.Default.PlayArrow,
    contentDescription = "再生",
    tint = Color.Black
)
Icon(
    imageVector = Icons.Filled.Home,
    contentDescription = "Home",
    tint = Color.Blue
)

またマテリアルアイコンのサイズは定義を辿っていくと分かりますが、マテリアルデザインガイドラインとして指定されている24.dpになっています。特別な理由がなければ24.dp以下にしないように実装するようにしておきましょう。

internal object IconButtonTokens {
    // 24dpが指定されている
    val IconSize = 24.0.dp
    // 〜〜〜〜〜〜〜〜
}

アイコンではなくXMLベースの画像リソースを表示させたい場合は以下の記事を参考にしてください。

Iconsで指定できるアイコンの種類

デフォルトでIconsで指定することができるのは49種類です。サジェストでアイコンが確認できるのも嬉しい点ですが、全体の一覧を表示することができないので少し探しにくいのが難点です。以下のような感じで一覧で表示できるようにしておくと楽です。

val iconList = listOf(
  Icons.Default.AccountBox,
  Icons.Default.AccountCircle,
  Icons.Default.Add,
  Icons.Default.AddCircle,
  Icons.Default.ArrowBack,
  Icons.Default.ArrowDropDown,
  Icons.Default.ArrowForward,
  Icons.Default.Build,
  Icons.Default.Call,
  Icons.Default.Check,
  Icons.Default.CheckCircle,
  Icons.Default.Clear,
  Icons.Default.Close,
  Icons.Default.Create,
  Icons.Default.DateRange,
  Icons.Default.Delete,
  Icons.Default.Done,
  Icons.Default.Edit,
  Icons.Default.Email,
  Icons.Default.ExitToApp,
  Icons.Default.Face,
  Icons.Default.Favorite,
  Icons.Default.FavoriteBorder,
  Icons.Default.Home,
  Icons.Default.Info,
  Icons.Default.KeyboardArrowDown,
  Icons.Default.KeyboardArrowLeft,
  Icons.Default.KeyboardArrowRight,
  Icons.Default.KeyboardArrowUp,
  Icons.Default.List,
  Icons.Default.LocationOn,
  Icons.Default.Lock,
  Icons.Default.MailOutline,
  Icons.Default.Menu,
  Icons.Default.MoreVert,
  Icons.Default.Notifications,
  Icons.Default.Person,
  Icons.Default.Phone,
  Icons.Default.Place,
  Icons.Default.PlayArrow,
  Icons.Default.Refresh,
  Icons.Default.Search,
  Icons.Default.Send,
  Icons.Default.Settings,
  Icons.Default.Share,
  Icons.Default.ShoppingCart,
  Icons.Default.Star,
  Icons.Default.ThumbUp,
  Icons.Default.Warning,
).sortedBy { icon -> icon.name }

@Preview(showBackground = true)
@Composable
fun IconSample() {
    LazyVerticalGrid(
        columns = GridCells.Fixed(7),
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        items(iconList) { icon ->
            Column (
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center,
                modifier = Modifier.padding(4.dp)
            ) {
                Icon(
                    painter = rememberVectorPainter(image = icon),
                    contentDescription = null,
                    modifier = Modifier.size(32.dp)
                )
                Text(
                    text = icon.name.split(".").last(),
                    fontSize = 10.sp,
                    maxLines = 1
                )
            }
        }
    }
}

アイコンのスタイル

アイコンのスタイルも複数用意されておりIcons.XXXXX部分を変更することでスタイルを変更することが可能です。DefaultはFilledと同じになります。

Filled（= Default）・・・塗りつぶし
Outlined・・・枠線のみ
Rounded・・・丸みのあるデザイン
Sharp・・・シャープな角ばったデザイン
TwoTone・・・2トーンカラー

val iconList = listOf(
    Icons.Default.AccountBox,
    Icons.Filled.AccountBox,
    Icons.Outlined.AccountBox,
    Icons.Rounded.AccountBox,
    Icons.Sharp.AccountBox,
    Icons.TwoTone.AccountBox,
).sortedBy { icon -> icon.name }

マテリアルアイコンの使用範囲を拡張する

material-icons-extendedパッケージを導入することですべてのアイコンが使用できるようになります。

build.gradle.kts
implementation 'androidx.compose.material:material-icons-extended:1.7.8'

ただ1つ注意点があり全てのアイコンが含まれる関係でAPKのサイズが大きくなります。これは公式からも注意喚起が行われておりProguardなどを使用してリソースの最適化を行うことが推奨されています。

ライブラリはサイズが大きく、APKのサイズに影響を与える可能性があります。そのため、本番環境ビルドではR8/Proguardを使用して、使用されていないリソースを削除することを検討してください。また、サイズが大きいため、開発中にプロジェクトのビルド時間とAndroid Studioのプレビューの読み込み時間が長くなる可能性があります

引用：公式リファレンス：Icon

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

Android