How to use Material Symbols in Android, Jetpack Compose and Kotlin
A step by step guide on implementing Google Font's Material Symbols in an Android app using Jetpack Compose and Kotlin.
A step by step guide on using Google Font's Material Symbols in an Android app using Jetpack Compose and Kotlin.
SubscribeDownload Open Source Kotlin Starter ProjectWhat are Material Symbols ?
"About a year ago, Google Fonts added Material Icons to its catalog as part of a larger effort to support open-source icons. This was a natural evolution for the platform, given that icons and fonts are so closely related. Today, Material Icons are one of the most popular design resources in the world and are used for both online and real-world applications.
There are a couple obvious reasons for the icon set’s popularity. First, the library is robust—it has 2,000 distinct icons in five styles. They’re also open source. But most of all, they were designed to be minimal and universally recognizable across different cultures and languages—and that makes them extremely versatile. Now, with the launch of Material Symbols, they’re also customizable."
Tutorial
Step One: Add the Dependency
In your App Level build.gradle.kts file, add the following dependency
implementation("androidx.compose.material:material-icons-extended:1.4.3")Please note that 1.4.3 may not be the latest version, please update the code above to the latest version in your Android Studio project.
Step Two: Sync the Gradles
Press Sync Now in the bar above the Gradle to update the project dependencies.
Step Three: Create a Composable
Create a composable in the project.
Follow our tutorial linked below to learn how to create a ConstraintLayout Composable.
Step Four: Implement a Symbol
Implement a symbol using code similar to the one below
Please note that the Check (default) is a symbol that's available. Consult the link below to learn about all the Material Symbols that are available.
Step Five: Test
Run the code and confirm that everything looks right.
Looking to apply Grade, Weight or Optical Size?
Unfortunately, the dependency that's available for the Material Icons does not yet provide this functionality. To integrate custom icons download the custom icon and add it to your project.