Compose `Icons.Outlined.Star` isn't outlined

Question

I am creating an app in Compose with a really simple navigation bar which displays two items: home and starred:

@Composable
fun HomeScreen(modifier: Modifier) {
    var selectedItem by remember { mutableStateOf(0) }

    val items = listOf(
        stringResource(id = R.string.bottomNavigationMenu_home),
        stringResource(id = R.string.bottomNavigationMenu_starred)
    )

    val icons = listOf(
        Icons.Outlined.Home,
        Icons.Outlined.Star,
    )

    Box(
        modifier = modifier
    ) {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Bottom
        ) {
            NewProjectButton(
                modifier = Modifier
                    .padding(16.dp)
                    .align(Alignment.End)
            )

            NavigationBar {
                items.forEachIndexed { index, item ->
                    NavigationBarItem(
                        icon = {
                            Icon(icons[index], contentDescription = item) },
                        label = {
                            Text(item)
                        },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        }
    }
}

The output looks like so (I have to embed the link as StackOverflow gives me an error when I try to do otherwise):

https://i.sstatic.net/4Zjxw.png

As you can probably see from the image, the star is not outlined and instead is filled. I was wondering whether or not this is fixable or it is an internal bug.

Edit 1

This seems to be an internal bug within Compose, whether or not it has been fixed on a newer version I don't know, but I am using the latest release candidate, so it's unlikely. I have filed an issue request to Google here: https://issuetracker.google.com/u/1/issues/253388323

Answer 1

I think the star outline shape is not available on material standard icons but you have the option of using the extended icons libs androidx.compose.material:material-icons-extended dependency which contains the full set of Material icons.

However, this is not encouraged due to the large size of this library. This leaves you with the option of using Android Studio's Import vector asset. feature.

For this you can follow these steps Right Click on Drawable Folder -> New -> Vector Asset -> Select Clip Art Radio Button -> Click on Clip Art Button -> search for 'Star Outline' on the search box -> Next -> Finish. Follow the same steps to import another vector for the home icon.

Thereafter you can create a list of painterResource as shown below.

val icons = listOf(
            painterResource(id = R.drawable.ic_outline_star),
            painterResource(id = R.drawable.ic_empty_home)
    )

After that you can use the same code for the icons at an index.