androidiosfontskotlin-multiplatformcompose-multiplatform

How to employ icons in .ttf files?


Im trying to use CoreUI icons in my app, and I created my own typography with CoreUI.ttf file. Everything works. I just don't know how to use those icons that are included in the .ttf file.

@Composable
fun CoreUIIconsFamily() = FontFamily(
    Font(Res.font.CoreUI_Icons_Linear)
)

@Composable
fun CoreUIIconsTypography() = Typography().run {
    val fontFamily = CoreUIIconsFamily()
    copy(
        displayLarge = displayLarge.copy(fontFamily = fontFamily),
        displayMedium = displayMedium.copy(fontFamily = fontFamily),
        displaySmall = displaySmall.copy(fontFamily = fontFamily),
        headlineLarge = headlineLarge.copy(fontFamily = fontFamily),
        headlineMedium = headlineMedium.copy(fontFamily = fontFamily),
        headlineSmall = headlineSmall.copy(fontFamily = fontFamily),
        titleLarge = titleLarge.copy(fontFamily = fontFamily),
        titleMedium = titleMedium.copy(fontFamily = fontFamily),
        titleSmall = titleSmall.copy(fontFamily = fontFamily),
        bodyLarge = bodyLarge.copy(fontFamily =  fontFamily),
        bodyMedium = bodyMedium.copy(fontFamily = fontFamily),
        bodySmall = bodySmall.copy(fontFamily = fontFamily),
        labelLarge = labelLarge.copy(fontFamily = fontFamily),
        labelMedium = labelMedium.copy(fontFamily = fontFamily),
        labelSmall = labelSmall.copy(fontFamily = fontFamily)
    )
}

@Composable
fun MyCustomTheme(content: @Composable () -> Unit) {
    val colorScheme = if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()
    MaterialTheme(
        typography = CoreUIIconsTypography(),
        colorScheme = colorScheme,
        content = content
    )
}

Solution

  • To show the icons, it is just like using any other font:

    Text("Hello")
    

    So, I downloaded CoreUI-Icons-Free and the above code does not show anything because the icon font does not have any shapes (glyphs) for the unicode characters H, e, l, o (0048, 0065, 006C, 006F).

    To find the code of the icons, can drop the font in https://fontdrop.info/ to view the unicodes.

    For example, the unicode for the airplane icon is EA07 so to show it in the app use a code like this:

    Text("\uEA07") // Airplane icon when the font is CoreUI-Icons-Free