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) )
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) )
![Vecteur Panier avec icône](https://developer.android.com/static/develop/ui/compose/images/graphics-shopping.png?authuser=5&hl=fr)
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.
Recommandations personnalisées
- Remarque : Le texte du lien s'affiche lorsque JavaScript est désactivé
- Ressources dans Compose
- Accessibilité dans Compose
- Chargement d'images {:#loading-images}