androidx.compose.material3.common

This library contains themeless components that can be shared between different Compose Material libraries to build Material Design components. It builds upon the Jetpack Compose libraries.

In this page, you'll find documentation for types, properties, and functions available in the androidx.compose.material3.common package.

Overview

Color Palette

APIs Description
Tonal Palette TonalPalette Tonal palette used to build the M3 color scheme

Icons

APIs Description
Icon Icon M3 icon

Also check out the androidx.compose.material.icons package.

Classes

TonalPalette

Tonal Palette structure in Material.

Cmn

Objects

Annotations

Top-level functions summary

Unit
@Composable
Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws bitmap using tint, with an optional tint color.

Cmn
Unit
@Composable
Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws imageVector using tint, with an optional tint color.

Cmn
Unit
@Composable
Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws painter using tint, with an optional tint color.

Cmn
Unit
@Composable
Icon(
    painter: Painter,
    tint: ColorProducer?,
    contentDescription: String?,
    modifier: Modifier
)

A Material Design icon component that draws painter using tint, with an optional tint color.

Cmn

Extension functions summary

Modifier

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

Cmn

Top-level properties summary

ProvidableCompositionLocal<Dp>

CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible.

Cmn

Top-level functions

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = Color.Unspecified
): Unit

A Material Design icon component that draws bitmap using tint, with an optional tint color. If bitmap has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

To learn more about icons, see Material Design icons

Parameters
bitmap: ImageBitmap

ImageBitmap to draw inside this icon

contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar

modifier: Modifier = Modifier

the Modifier to be applied to this icon

tint: Color = Color.Unspecified

tint to be applied to bitmap. If Color.Unspecified is provided, then no tint is applied.

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = Color.Unspecified
): Unit

A Material Design icon component that draws imageVector using tint, with an optional tint color. If imageVector has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use null for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

To learn more about icons, see Material Design icons

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Lock
import androidx.compose.material3.common.Icon
import androidx.compose.material3.common.TonalPaletteDefaults

Icon(
    Icons.Outlined.Lock,
    contentDescription = "Localized description",
    tint = TonalPaletteDefaults.BaselineTonalPalette.primary100
)
Parameters
imageVector: ImageVector

ImageVector to draw inside this icon

contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar

modifier: Modifier = Modifier

the Modifier to be applied to this icon

tint: Color = Color.Unspecified

tint to be applied to imageVector. If Color.Unspecified is provided, then no tint is applied.

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = Color.Unspecified
): Unit

A Material Design icon component that draws painter using tint, with an optional tint color. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

To learn more about icons, see Material Design icons

Parameters
painter: Painter

Painter to draw inside this icon

contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar

modifier: Modifier = Modifier

the Modifier to be applied to this icon

tint: Color = Color.Unspecified

tint to be applied to painter. If Color.Unspecified is provided, then no tint is applied.

@Composable
fun Icon(
    painter: Painter,
    tint: ColorProducer?,
    contentDescription: String?,
    modifier: Modifier = Modifier
): Unit

A Material Design icon component that draws painter using tint, with an optional tint color. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead. For a clickable icon, see IconButton.

To learn more about icons, see Material Design icons

Parameters
painter: Painter

Painter to draw inside this icon

tint: ColorProducer?

tint to be applied to painter. If null, then no tint is applied.

contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar

modifier: Modifier = Modifier

the Modifier to be applied to this icon

Extension functions

minimumInteractiveComponentSize

fun Modifier.minimumInteractiveComponentSize(): Modifier

Reserves at least 48.dp in size to disambiguate touch interactions if the element would measure smaller.

https://m3.material.io/foundations/accessible-design/accessibility-basics

This uses the Material recommended minimum size of 48.dp x 48.dp, which may not the same as the system enforced minimum size. The minimum clickable / touch target size (48.dp by default) is controlled by the system via ViewConfiguration and automatically expanded at the touch input layer.

This modifier is not needed for touch target expansion to happen. It only affects layout, to make sure there is adequate space for touch target expansion.

Top-level properties

LocalMinimumInteractiveComponentSize

val LocalMinimumInteractiveComponentSizeProvidableCompositionLocal<Dp>

CompositionLocal that configures the minimum touch target size for Material components (such as Button) to ensure they are accessible. If a component has a visual size that is lower than the minimum touch target size, extra space outside the component will be included. If set to Dp.Unspecified there will be no extra space, and so it is possible that if the component is placed near the edge of a layout / near to another component without any padding, there will not be enough space for an accessible touch target.