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) )
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) )
![Shopping cart vector with Icon](/https/developer.android.com/static/develop/ui/compose/images/graphics-shopping.png)
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}