Hi! I am using Material design extended icons in my android app developed with Jetpack Compose. Howe...

# compose

[Manojna Chintapalli]

Hi! I am using Material design extended icons in my android app developed with Jetpack Compose. However, I do not see a way to adjust their weight/grade/boldness. Can someone please help me with this? Thanks!

[Chris Sinco [G]]

The Compose Material icons libraries are generated from the vector drawables and not the Material Symbol icon font, so changing weight/grade/boldness isn’t possible since you need a variable font, somewhat noted here: https://developers.google.com/fonts/docs/material_symbols#use_in_android

[Chris Sinco [G]]

I don’t think we have any official guides about how to use a variable font in Compose but maybe @Sean McQuillan [G] or @Siyamed have pointers here

[efemoney]

It (font variation) is supported at the platform level (API26+) via Typeface.Builder but not exposed in Compose afaik (yet?)

[efemoney]

You can (probably, needs confirmation) create your own Typeface.Builder()...build() using the material icon font and pass it to compose via FontFamily(myTypeface)

[Siyamed]

Variable fonts are instantiated during construction using FontVariatiin.Settings

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/package-summary#Font(kotlin.String,android.content.res.AssetManager,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontVariation.Settings)

[Siyamed]

There are also utility functions to create settings for common axes

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/font/FontVariation

[Siyamed]

They work only after api26

[Siyamed]

So Font(... , grade(X)) will create the font with the requested grade

[Manojna Chintapalli]

Thanks. I will checkout the links.

[Manojna Chintapalli]

@Siyamed The links only show how to create a Font but I don't understand how to apply that changes to my material design icons. Can you please guide me? Thanks. Also, I didn't see grade parameter in Font method in AndroidFont.kt class.

This is what I have in my code:

Icon(imageVector = Icons.Outlined.Sensors,
contentDescription = null,
modifier = Modifier.size(25.dp))

[efemoney]

@Manojna Chintapalli https://kotlinlang.slack.com/archives/CJLTWPH7S/p1666154070555039?thread_ts=1666145166.152889&cid=CJLTWPH7S

You cannot change the properties you want on the icon. You can do that if you use the variable font instead. As it is a font, it can only be used in a Text composable.

[Manojna Chintapalli]

Oh! got it. It won't help my case then. I will look into alternative solutions for my issue. Thanks for the reply.