Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Die Icon-Composable ist eine praktische Möglichkeit, ein einfarbiges Symbol auf dem Bildschirm zu zeichnen, das den Material Design-Richtlinien entspricht. Wenn Sie Icon verwenden möchten, müssen Sie die Compose Material-Bibliothek (oder die Compose Material 3-Bibliothek) einbinden.
Wenn Sie beispielsweise ein Vektordrawable mit Material-Standardwerten laden möchten, können Sie die Icon-Composable so verwenden:
Standardmäßig wird die zusammensetzbare Funktion Icon mit LocalContentColor.current getönt und hat die Größe 24.dp. Außerdem wird ein tint-Farbparameter bereitgestellt, der denselben Mechanismus für die Farbtonanpassung nutzt, der im Abschnitt Bildfarbton beschrieben wird. Die zusammensetzbare Funktion Icon ist für kleine Icons vorgesehen. Für mehr Anpassungsoptionen sollten Sie die Image-Composable verwenden.
Empfehlungen für dich
Hinweis: Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-08-30 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-08-30 (UTC)."],[],[],null,["The `Icon` composable is a convenient way to draw a single color icon on screen\nthat follows [Material Design guidelines](https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes). To use `Icon`, include\nthe [Compose Material](/jetpack/androidx/releases/compose-material) library (or the [Compose Material 3](/jetpack/androidx/releases/compose-material3) library).\n\nFor example, if you had a vector drawable that you wanted to load up with\nMaterial defaults, you can use the `Icon` composable as follows:\n\n\n```kotlin\nIcon(\n painter = painterResource(R.drawable.baseline_directions_bus_24),\n contentDescription = stringResource(id = R.string.bus_content_description)\n)https://github.com/android/snippets/blob/f95ab59fad80aeaf5d6a90bab8a01a126f20f44e/compose/snippets/src/main/java/com/example/compose/snippets/images/MaterialIconsSnippets.kt#L47-L50\n```\n\n\u003cbr /\u003e\n\nBy default, the `Icon` composable is tinted with `LocalContentColor.current` and\nis `24.dp` in size. It also exposes a `tint` color parameter (which leverages\nthe same mechanism for tinting as described in the [Image tint](/develop/ui/compose/graphics/images/customize#tint-image) section). The\n`Icon` composable is intended for use for small icon elements. You should use\nthe `Image` composable for more customization options.\n| **Note:** With Material there are two different styles of icons, Material Symbols (New) and Material Icons (`material-icons`). The [Material Icon library](/reference/kotlin/androidx/compose/material/icons/package-summary) includes a set of predefined `Icons` that can be used in Compose without needing to import an SVG manually. However, this artifact is no longer maintained or recommended for use in your apps, as it contains an older look and feel and can also increase the build time of your apps *significantly* . Instead, we recommend using [Google Font Icons](https://fonts.google.com/icons) and download the XML file from the Android Tab to create an up-to-date Material Symbols style Icon.\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [Resources in Compose](/develop/ui/compose/resources)\n- [Accessibility in Compose](/develop/ui/compose/accessibility)\n- [Loading images {:#loading-images}](/develop/ui/compose/graphics/images/loading)"]]
