Skip to content

Compose Image is ignoring size modifier #638

@Nek-12

Description

@Nek-12

About this issue

For the following composable

RIcon
@Composable
fun RIcon(
    icon: IIcon,
    modifier: Modifier = Modifier,
    size: Dp = Size.icon,
    color: Color = Color.Unspecified,
    respectFontBounds: Boolean = false, // needed to align some icons correctly
) {
    Image(
        asset = icon,
        modifier = modifier.requiredSizeIn(maxWidth = size, maxHeight = size),
        alignment = Alignment.Center,
        contentScale = ContentScale.Fit,
        iconicsConfig = IconicsConfig(
            respectFontBounds = respectFontBounds,
            iconBrush = SolidColor(color.takeOrElse { LocalContentColor.current }),
            paddingDp = 1,
        ),
    )
}

When using sizeIn(maxWidth, maxHeight), the modifier is ignored and icons spill outside of the composable bounds.requiredSizeIn fixes the issue but breaks animations & other Material widgets that want to resize the icon composable.
We need a proper solution for sizing icons without using requiredSize.

Why is this and how can this be fixed?
Using respectFontBounds = true is not possible because that breaks alignment of icons in the container.

Details

  •  Used library version 5.5.0-compose01
  •  Other used libraries, potential conflicting libraries - compose-material-3 v1.2.0-alpha09, compose 1.6.0-alpha07

Checklist

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions