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)
)
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