How to use Material Symbols in Android, Jetpack Compose and Kotlin

Four flowers that represent Kotlin, Android, Jetpack Compose and Android Studio side by side. Beneath them sits the text “Material Symbols.”

A step by step guide on using Google Font's Material Symbols in an Android app using Jetpack Compose and Kotlin.

What 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

A screenshot of Android Studio showing the App Level build.gradle.kts file. Highlighted is the new dependency, whose code is provided below.

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

A screenshot of Android Studio showing a gradle file that has recently been modified. Highlighted is the "Sync Now" button that appears on the right of the prompt at the top of the Gradle file. Click this button to sync the gradle files with the project.

Press Sync Now in the bar above the Gradle to update the project dependencies.

Step Three: Create a Composable

An image showing a screenshot of an Android phone with a box centered on the screen and a label beneath it with the text "A Sample String."

Create a composable in the project.

Follow our tutorial linked below to learn how to create a ConstraintLayout Composable.

Step Four: Implement a Symbol

A screenshot of Android Studio with a highlight on the code that's used to 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

A screenshot of an Android device showing a symbol on the screen.

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.

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

How to use Material Symbols in Android, 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.

What are Material Symbols ?

Tutorial

Step One: Add the Dependency

Step Two: Sync the Gradles

Step Three: Create a Composable

Step Four: Implement a Symbol

Step Five: Test

Looking to apply Grade, Weight or Optical Size?

Any Questions?

Book a Free Consultation.

Click here to email us.

Fill in the details below to book a free consultation or to let us know about something else. Whatever it is, we are here to help.

How can we help you ?

Contact Details