Scribd
Upload
11 views

Material Icons - Jetpack Compose - Android Developers

Uploaded by

Hien Nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

Material Icons - Jetpack Compose - Android Developers

Uploaded by

Hien Nguyen
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

8/9/24, 10:34 AM Material icons | Jetpack Compose | Android Developers

Material icons
The Icon composable is a convenient way to draw a single color icon on screen that
follows Material Design guidelines
(https://material.io/design/iconography/system-icons.html#grid-and-keyline-shapes). To use Icon ,
include the Compose Material (/jetpack/androidx/releases/compose-material) library (or the
Compose Material 3 (/jetpack/androidx/releases/compose-material3) 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
)
e/snippets/src/main/java/com/example/compose/snippets/images/MaterialIconsSnippets.kt#L47-L50)

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
(/develop/ui/compose/graphics/images/customize#tint-image) 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 (/reference/kotlin/androidx/compose/material/icons/package-summary)


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
(https://fonts.google.com/icons?icon.query=shopping+cart):

Icon(
Icons.Rounded.ShoppingCart,
contentDescription = stringResource(id = R.string.shopping_cart_content_de
)
se/snippets/src/main/java/com/example/compose/snippets/images/MaterialIconsSnippets.kt#L54-L57)

https://developer.android.com/develop/ui/compose/graphics/images/material 1/2
8/9/24, 10:34 AM Material icons | Jetpack Compose | Android Developers

Figure 1: Shopping cart vector with Icon

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 (/reference/kotlin/androidx/compose/material/icons/package-summary).

Previous
arrow_back ImageBitmap vs ImageVector (/develop/ui/compose/graphics/images/compare)
Next
Customize an image (/develop/ui/compose/graphics/images/customize) arrow_forward

Content and code samples on this page are subject to the licenses described in the Content License
(/license). Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.

Last updated 2024-08-06 UTC.

https://developer.android.com/develop/ui/compose/graphics/images/material 2/2

You might also like