Ikony Materiał

Funkcja kompozycyjna Icon to wygodny sposób na narysowanie na ekranie ikony w jednym kolorze, zgodnej ze wskazówkami dotyczącymi interfejsu Material Design. Aby używać Icon, dodaj bibliotekę Compose Material (lub bibliotekę Compose Material 3).

Jeśli na przykład masz obiekt rysowany wektorowo, który chcesz załadować z użyciem domyślnych ustawień Material, możesz użyć komponentu Icon w ten sposób:

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

Domyślnie kompozyt Icon jest zabarwiony na kolor LocalContentColor.current i ma rozmiar 24.dp. Zawiera on też parametr tint (który wykorzystuje ten sam mechanizm barwienia, co opisano w sekcji Barwienie obrazu). Komponent Icon jest przeznaczony do tworzenia małych elementów ikon. Aby uzyskać więcej opcji dostosowywania, użyj komponentu Image.

Biblioteka ikon Material Design zawiera też zestaw wstępnie zdefiniowanych elementów Icons, których można używać w funkcji tworzenia wiadomości bez konieczności ręcznego importowania pliku SVG. Aby narysować zaokrągloną wersję ikony koszyka:

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

Ilustracja 1. Wektor koszyka na zakupy z ikoną

Warto zauważyć, że nie trzeba używać Icon do renderowania VectorDrawable na ekranie. Pod maską Icon używa Modifier.paint(painterResource(R.drawable.ic_bus_stop) do wyświetlania Icon na ekranie. Więcej informacji o wszystkich dostępnych ikonach znajdziesz w dokumentacji ikon.