マテリアル アイコン

Icon コンポーザブルを使用すると、マテリアル デザイン ガイドラインに沿った単色のアイコンを画面に簡単に描画できます。Icon を使用するには、Compose マテリアル ライブラリ(または Compose マテリアル 3 ライブラリ)を含めます。

たとえば、マテリアルのデフォルトで読み込むベクター型ドローアブルがある場合は、次のように Icon コンポーザブルを使用できます。

Icon(
    painter = painterResource(R.drawable.baseline_directions_bus_24),
    contentDescription = stringResource(id = R.string.bus_content_description)
)

デフォルトでは、Icon コンポーザブルの色は LocalContentColor.current で、サイズは 24.dp です。また、tint カラー パラメータも公開されています(画像の色合いのセクションで説明したものと同じ色合い調整のメカニズムが使用されます)。Icon コンポーザブルは、小さなアイコン要素での使用を目的としています。その他のカスタマイズ オプションについては、Image コンポーザブルを使用する必要があります。

また、マテリアル アイコン ライブラリには、SVG を手動でインポートしなくても Compose で使用できる、事前定義された Icons のセットも含まれています。丸みを帯びたショッピング カート アイコンを描画する方法は次のとおりです。

Icon(
    Icons.Rounded.ShoppingCart,
    contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)

アイコンが表示されたショッピング カートのベクター
図 1: アイコンが表示されたショッピング カートのベクター

画面に VectorDrawable をレンダリングするために Icon を使用する必要はありません。内部的には、IconModifier.paint(painterResource(R.drawable.ic_bus_stop) を使用して画面に Icon を描画します。使用可能なすべてのアイコンの詳細については、アイコンのドキュメントをご覧ください。