Jetpack Compose Academy · Lektion

Material Icons mit Icon

Verwenden Sie das integrierte Icon-Set überall.

Material Icons mit Icon ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

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! 🎯

Häufig gestellte Fragen

Ist die Lektion „Material Icons mit Icon“ kostenlos?

Ja — der vollständige Text von „Material Icons mit Icon“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Material Icons mit Icon“?

Verwenden Sie das integrierte Icon-Set überall. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Material Icons mit Icon“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy