The Icon drawable inside the IconButton composable is black despite it being white. The picture below of the current setup shows the garbage can icon at the top right on an alpha background. How can I fix this issue?

@Composable
fun AppImage(
    modifier: Modifier = Modifier,
    imageUri: Uri = Uri.EMPTY,
    contentScale: ContentScale = ContentScale.None,
    contentDescription: String? = null,
    loadingImage: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Loading) -> Unit)? = null,
    successResult: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Success) -> Unit)? = null,
    errorResult: @Composable (SubcomposeAsyncImageScope.(AsyncImagePainter.State.Error) -> Unit)? = null
) {
    Card(
        modifier = Modifier
            .height(250.dp)
            .width(350.dp)
            .padding(15.dp)
            .clickable(
                indication = null,
                interactionSource = remember { MutableInteractionSource() }) {
            },
        elevation = 7.dp
    ) {
        Box(
            modifier = Modifier
                .padding(16.dp)
                .wrapContentSize(Alignment.Center)
        ) {
            SubcomposeAsyncImage(
                model = imageUri,
                modifier = modifier,
                contentScale = contentScale,
                contentDescription = contentDescription,
                loading = loadingImage,
                success = successResult,
                error = errorResult
            )

            IconButton(
                onClick = {},
                modifier = Modifier
                    .clip(CircleShape)
                    .background(color = Color.Black.copy(alpha = 0.5f))
                    .align(Alignment.TopEnd)
                    .size(33.dp)
            ) {
                Icon(
                    painterResource(id = R.drawable.ic_filled_delete_30),
                    contentDescription = "Delete Item Picture",
                    modifier = Modifier
                        .clickable(onClick = {
                        })
                )
            }
        }
    }
}

CodePudding user response：

You can chanage color of drawable using tint property of Icon

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
)