Icônes Material

Le composable Icon est un moyen pratique de dessiner une icône de couleur unie à l'écran conformément aux consignes Material Design. Pour utiliser Icon, incluez la bibliothèque Compose Material (ou la bibliothèque Compose Material 3).

Par exemple, si vous disposez d'un drawable vectoriel que vous souhaitez charger avec les valeurs Material par défaut, vous pouvez utiliser le composable Icon comme suit :

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

Par défaut, le composable Icon est teinté avec LocalContentColor.current et sa taille est de 24.dp. Il expose également un paramètre de couleur tint (qui utilise le même mécanisme de teinte que celui décrit dans la section Coloration des images). Le composable Icon est destiné aux petites icônes. Vous devez utiliser le composable Image pour obtenir plus d'options de personnalisation.

La bibliothèque Material Icon comprend également un ensemble d'éléments Icons prédéfinis pouvant être utilisés dans Compose et qui ne nécessitent pas l'importation manuelle d'un SVG. Pour dessiner la version arrondie de l'icône du panier, procédez comme suit :

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

Figure 1 : Vecteur panier avec icône

Notez qu'il n'est pas nécessaire d'utiliser Icon pour afficher VectorDrawable à l'écran. En arrière-plan, Icon utilise Modifier.paint(painterResource(R.drawable.ic_bus_stop) pour dessiner l'élément Icon à l'écran. Pour en savoir plus sur toutes les icônes disponibles, consultez la documentation sur les icônes.