Jetpack Compose Academy · Leçon

Icônes Material avec Icon

Utilisez l’ensemble d’icônes intégré où vous le souhaitez.

Icônes Material avec Icon est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Meet the Icon Composable

For small symbols like a heart or a back arrow, Compose gives you Icon. It is lighter than Image and tints itself to your theme.

A Library of Icons

You get hundreds of ready-made symbols from Icons, the Material icon set. No drawing, no exporting, just reference one by name.

Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")

imageVector Is the Symbol

Icon takes an imageVector, a vector graphic from the Material set. Because it is a vector, it stays crisp at any size.

Five Visual Styles

Each symbol comes in styles: Default, Outlined, Rounded, Sharp, and TwoTone. Pick the one that matches your app personality.

Icon(Icons.Outlined.Settings, contentDescription = "Settings")

Extended Icon Pack

The base set is small to keep apps lean. Add the material-icons-extended dependency to unlock thousands more symbols.

Icons Tint Automatically

By default an Icon paints itself with the current content color from your theme, so it always looks consistent without you setting a color.

Override the Tint

Want a custom color? Pass a tint argument and the symbol repaints in exactly that shade.

Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)

Sizing an Icon

Icons render at 24dp by default, the Material standard. Change it with a Modifier.size just like any other composable.

Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))

Describe It Too

Like Image, Icon needs a contentDescription. Describe its action, such as "Add to favorites", or pass null if a nearby label already explains it.

Icons Inside Buttons

Icons shine inside other composables. Dropping an Icon into an IconButton gives you a tappable, perfectly sized action.

IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }

Icon from a Drawable

You can also build an Icon from your own asset using painterResource instead of imageVector, keeping the same automatic tinting.

Quick Check

What is the default color an Icon uses when you do not set a tint?

Recap: Material Icons

You now use Icon for crisp vector symbols, choose a style, override the tint, and size with a modifier. Next: scaling images! 🎯

Questions Fréquemment Posées

La leçon « Icônes Material avec Icon » est-elle gratuite ?

Oui — le texte complet de « Icônes Material avec Icon » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Icônes Material avec Icon » ?

Utilisez l’ensemble d’icônes intégré où vous le souhaitez. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Icônes Material avec Icon » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Jetpack Compose Academy