How to add a shadow / border / elevation to an icon in Jetpack Compose

Question

I would like to add a shadow to my icon in Jetpack compose, so that the image & text have a (roughly) similar shadow.

Text(
    text = "HAS SHADOW",
    style = MaterialTheme.typography.body2.copy(
        shadow =  Shadow(
            color = Color(0x4c000000),
            offset = Offset(2f, 2f),
            blurRadius = 7f
        )
    ),
)

Text(
    text = "HAS NO SHADOW",
    style = MaterialTheme.typography.body2
)

Please note: As you can see above, the icon is partly transparent and i want to keep it that way -> solutions like "Wrap it in a FloatingActionButton" won't work

Can i do this in compose or do i have to ask my designer to add a shadow?

Answer 1

For shadow and elevation

Modifier.shadow(elevation: Dp, shape: Shape, clip: Boolean)

For border

Modifier.border(border: BorderStroke, shape: Shape)

Also, check the link for other border function variants.