Material icons

The Icon composable is a convenient way to draw a single color icon on screen that follows Material Design guidelines. To use Icon, include the Compose Material library (or the Compose Material 3 library).

For example, if you had a vector drawable that you wanted to load up with Material defaults, you can use the Icon composable as follows:

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

By default, the Icon composable is tinted with LocalContentColor.current and is 24.dp in size. It also exposes a tint color parameter (which leverages the same mechanism for tinting as described in the Image tint section). The Icon composable is intended for use for small icon elements. You should use the Image composable for more customization options.

The Material Icon library also includes a set of predefined Icons that can be used in Compose without needing to import an SVG manually. To draw the rounded version of the shopping cart icon:

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

It's worth noting that it's not required to use Icon to render a VectorDrawable on screen, under the hood, Icon uses Modifier.paint(painterResource(R.drawable.ic_bus_stop)) to draw the Icon on screen. For more information on all the available icons, take a look at the Icons documentation.

Recommended for you

• Note: link text is displayed when JavaScript is off
• Resources in Compose
• Accessibility in Compose
• Loading images {:#loading-images}