Thành phần kết hợp Icon là cách thuận tiện để vẽ một biểu tượng một màu duy nhất trên màn hình theo nguyên tắc của Material Design. Để sử dụng Icon, hãy thêm thư viện Compose Material (hoặc thư viện Compose Material 3).
Ví dụ: nếu muốn tải một vectơ vẽ được lên bằng các giá trị mặc định của Material, bạn có thể dùng thành phần kết hợp Icon như sau:
Icon(
painter = painterResource(R.drawable.baseline_directions_bus_24),
contentDescription = stringResource(id = R.string.bus_content_description)
)
Theo mặc định, thành phần kết hợp Icon được phủ màu LocalContentColor.current và có kích thước 24.dp. Thành phần này cũng hiển thị tham số màu tint (tận dụng cơ chế phủ màu tương tự như mô tả trong phần Phủ màu hình ảnh).
Thành phần kết hợp Icon là để dùng cho các phần tử biểu tượng nhỏ. Bạn nên sử dụng thành phần kết hợp Image để có thêm lựa chọn tuỳ chỉnh.
Thư viện Biểu tượng Material cũng bao gồm một tập hợp Icons được xác định trước. Có thể dùng tập hợp này trong Compose mà không cần nhập SVG (Đồ hoạ vectơ có thể mở rộng) theo cách thủ công. Cách vẽ phiên bản hình tròn của biểu tượng giỏ hàng như sau:
Icon(
Icons.Rounded.ShoppingCart,
contentDescription = stringResource(id = R.string.shopping_cart_content_desc)
)
Lưu ý rằng về bản chất, bạn không bắt buộc phải dùng Icon để hiển thị VectorDrawable trên màn hình. Icon sử dụng Modifier.paint(painterResource(R.drawable.ic_bus_stop)) để vẽ Icon trên màn hình. Để biết thêm thông tin về tất cả các biểu tượng có sẵn, hãy xem tài liệu về Biểu tượng.