Ikony Materiał

Funkcja kompozycyjna Icon to wygodny sposób na narysowanie na ekranie jednokolorowej ikony zgodnie z wytycznymi Material Design. Aby użyć funkcji Icon, dołącz bibliotekę Tworzenie materiałów (lub bibliotekę Tworzenie materiału 3).

Jeśli na przykład masz obiekt rysowalny wektorowy i chcesz go załadować przy użyciu domyślnych ustawień Material, możesz użyć funkcji Icon kompozycyjnej 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 funkcja kompozycyjna Icon ma kolor LocalContentColor.current i rozmiar 24.dp. Udostępnia też parametr koloru tint (używany jest ten sam mechanizm barbowania, jak opisano w sekcji Odcień obrazu). Funkcja kompozycyjna Icon jest przeznaczona dla małych elementów. Aby mieć więcej opcji dostosowywania, użyj interfejsu Image composable.

Biblioteka ikony materiału zawiera też zestaw wstępnie zdefiniowanych elementów Icons, których można używać podczas tworzenia 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

Rys. 1. Wektor koszyka na zakupy z ikoną

Warto zauważyć, że nie musisz używać elementu Icon do renderowania na ekranie elementu VectorDrawable za pomocą Icon. Icon używa w tym celu Modifier.paint(painterResource(R.drawable.ic_bus_stop). Więcej informacji o wszystkich dostępnych ikonach znajdziesz w dokumentacji ikon.