[FIXED] Compose `Icons.Outlined.Star` isn't outlined


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

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(

        modifier = modifier
    ) {
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Bottom
        ) {
                modifier = Modifier

            NavigationBar {
                items.forEachIndexed { index, item ->
                        icon = {
                            Icon(icons[index], contentDescription = item) },
                        label = {
                        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):


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


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.

Answered By – Tonnie

Answer Checked By – Clifford M. (FixeMe Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *