I’m having a weird problem with `Icon` . All my `Icon` turned black when using in a composable and I...

# compose

[Tin Tran]

I’m having a weird problem with Icon . All my Icon turned black when using in a composable and I have to use tint to turn it into the right color. Does anyone else having the same issue?

[Tin Tran]

The code is very simple. Nothing special

Icon(
    painter = painterResource(R.drawable.ic_bullet),
    contentDescription = ""
)

[Tin Tran]

It do appear orange in AS but rendered black in compose review and simulator device too

[Tin Tran]

[Abhishek Dewan]

Make sure to set the alpha to 1 or have FF infront of your color hex. So like set the tint to 0xFFFF0000 and see if it still shows up as black

[Tin Tran]

if u set tint it will show the color u set with tint

[Tin Tran]

i changed to Image and it worked correctly

[patrick]

@Tin Tran are your icons by any chance multi colored? tinting will update all colors to the specified one. Or is there a layer on top that has an invisible color set? this needs to be removed then

[Tin Tran]

It’s a vector image with 1 path and 1 solid color

[patrick]

Oh maybe black is your "MaterialTheme.colors.onBackground" color and you are using the icons within a Surface ? So they are tinted by default?

[Tin Tran]

No, it’s not on a surface(or is it?). I took a screen shot of the test code at the beginning of this thread. You can take a look.

[Tin Tran]

From now on I’ll just use Image and if i need to change the icon color I’ll use Icon and change it’s tint

[Bryan Herbst]

Icon is specifically designed to always tint your icon with LocalContentColor. From the docs:

Icon component that draws imageVector using tint, defaulting to LocalContentColor.

Sounds like you already found it, but Image is effectively the same without the tinting behavior.