Materialsymbole

Mit dem Icon-Element können Sie auf einfache Weise ein einfarbiges Symbol auf dem Bildschirm zeichnen, das den Material Design-Richtlinien entspricht. Wenn Sie Icon verwenden möchten, fügen Sie die Bibliothek Compose Material (oder die Bibliothek Compose Material 3) ein.

Wenn Sie beispielsweise ein Vektor-Zeichnen haben, das Sie mit Material-Standardeinstellungen laden möchten, können Sie das Icon-Kompositelement so verwenden:

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

Standardmäßig ist das Icon-Element mit LocalContentColor.current getönt und hat eine Größe von 24.dp. Außerdem wird der Farbparameter tint freigegeben, für den derselbe Mechanismus zur Färbung verwendet wird, der im Abschnitt Bildton beschrieben wird. Das Icon-Element ist für kleine Symbolelemente gedacht. Für mehr Anpassungsmöglichkeiten sollten Sie das Image-Element verwenden.

Die Material Icon Library enthält auch eine Reihe vordefinierter Icons, die in Compose verwendet werden können, ohne dass eine SVG-Datei manuell importiert werden muss. So zeichnen Sie die abgerundete Version des Einkaufswagensymbols:

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

Es ist nicht erforderlich, Icon zu verwenden, um eine VectorDrawable auf dem Bildschirm zu rendern. Im Hintergrund verwendet Icon Modifier.paint(painterResource(R.drawable.ic_bus_stop), um die Icon auf dem Bildschirm zu zeichnen. Weitere Informationen zu allen verfügbaren Symbolen finden Sie in der Symboldokumentation.