ไอคอนวัสดุ

คอมโพสิเบิล Icon เป็นวิธีที่สะดวกในการวาดไอคอนสีเดียวบนหน้าจอซึ่งเป็นไปตามหลักเกณฑ์ของ Material Design หากต้องการใช้ Icon ให้ใส่ไลบรารี Compose Material (หรือไลบรารี Compose Material 3)

เช่น หากมีองค์ประกอบภาพเวกเตอร์ที่คุณต้องการโหลดด้วยค่าเริ่มต้นของ Material คุณสามารถใช้คอมโพสิเบิล Icon ดังนี้

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

โดยค่าเริ่มต้น คอมโพสิเบิล Icon จะมีสี LocalContentColor.current และมีขนาด 24.dp และยังแสดงพารามิเตอร์สี tint ด้วย (ซึ่งใช้ประโยชน์จากกลไกการปรับสีเดียวกันตามที่อธิบายไว้ในส่วนการปรับสีรูปภาพ) Composable Icon มีไว้สำหรับใช้องค์ประกอบไอคอนขนาดเล็ก คุณ ควรใช้ Image Composable สำหรับตัวเลือกการปรับแต่งเพิ่มเติม

นอกจากนี้ คลังไอคอน Material ยังมีชุด Icons ที่กําหนดไว้ล่วงหน้าซึ่งใช้ใน Compose ได้โดยไม่ต้องนําเข้า SVG ด้วยตนเอง วิธีวาดไอคอนรถเข็นช็อปปิ้งเวอร์ชันโค้งมน

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

รูปที่ 1: เวกเตอร์รถเข็นช็อปปิ้งพร้อมไอคอน

โปรดทราบว่าไม่จำเป็นต้องใช้ Icon เพื่อแสดงผล VectorDrawable บนหน้าจอ ภายในระบบ Icon ใช้ Modifier.paint(painterResource(R.drawable.ic_bus_stop)) เพื่อวาดIconบน บนหน้าจอ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับไอคอนทั้งหมด โปรดดูที่ เอกสารประกอบของไอคอน