Vector graphic does not show properly

Question

I have a graphic for a Splash Screen

@Composable
fun SplashScreen() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Icon(
            imageVector = ImageVector.vectorResource(R.drawable.rastergrafik),
            contentDescription = "",
        )
    }
}

This is straight forward so far. Also if you hover over R.id.rastergrafik, the graphic gets shown in the way it should:

But in the app it looks like this:

Does anyone know whats going on? Is it a problem if I show it as an Icon? The same vector also works fine as app logo.

Answer 1

Add tint = Color.Unspecified

Icon(
    imageVector = ImageVector.vectorResource(R.drawable.rastergrafik),
    contentDescription = "",
    tint = Color.Unspecified,
)

---

Reason

From the Icon source code,

A Material Design icon component that draws imageVector using tint, with a default value of LocalContentColor.

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.

So a default tint is applied to the icon provided.