Ikon material

Composable Icon adalah cara yang mudah untuk menggambar ikon tunggal berwarna di layar yang mengikuti pedoman Desain Material. Untuk menggunakan Icon, sertakan library Compose Material (atau library Compose Material 3 ).

Misalnya, jika Anda memiliki vektor drawable yang ingin dimuat dengan default Material, Anda dapat menggunakan composable Icon sebagai berikut:

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

Secara default, composable Icon diberi warna dengan LocalContentColor.current dan berukuran 24.dp. Composable ini juga mengekspos parameter warna tint (yang memanfaatkan mekanisme yang sama untuk menambahkan tint seperti yang dijelaskan di bagian Tint gambar). Composable Icon ditujukan untuk digunakan pada elemen ikon kecil. Anda harus menggunakan composable Image untuk opsi penyesuaian lainnya.

Library Ikon Material juga menyertakan kumpulan Icons yang telah ditentukan sebelumnya, yang dapat digunakan di Compose tanpa perlu mengimpor SVG secara manual. Untuk menggambar versi bulat ikon keranjang belanja:

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

Gambar 1: Vektor keranjang belanja dengan Ikon

Perlu diperhatikan bahwa Anda tidak perlu menggunakan Icon untuk merender VectorDrawable di layar, di balik layar, Icon menggunakan Modifier.paint(painterResource(R.drawable.ic_bus_stop)) untuk menggambar Icon di layar. Untuk mengetahui informasi selengkapnya tentang semua ikon yang tersedia, lihat Dokumentasi ikon.