Using Material Symbols Icons on Android

As Google begins to roll out more support for Material You, it’s time to start thinking about leveraging the updated design system in your Android app. One way you can do that is by using the new Material Symbols icon set in your application. However, while the process to start using them is simple, it’s not straightforward. Let’s take a look to see how it’s done.

Navigate to Icons on Google Fonts

A lot of Android developers are used to going into Asset Studio in Android Studio to add icons, but the new Material Symbols icons are not available there yet. Instead, you are going to download them from the Google Fonts site. From there you will select the “Icons” tab at the top of the screen and you should now see the icon page, which defaults to looking at the Material Symbols icon set.

Customize Icon Appearance

The new Material Symbols icon set gives designers and developers a lot of flexibility to tweak icons to fit their needs. You can choose a style using the chips near the top of the page, and then use the sliders in the “Customization” sidebar to set the fill, weight, grade, and optical size that you need.

Select icon and download as Android drawable XML

Now here is the not-so-obvious part: When you select your icon, there will be a flyout that appears on the right edge of the screen. From here you should select the “Android” tab and click the “Download” button at the bottom of the flyout. The downloaded drawable XML file will have your customizations applied. (You can see this for yourself by downloading an icon, changing the “Customization” sliders, downloading it again, and comparing the two files.)

Import the downloaded file into your Android project

From here all you need to do is import the downloaded drawable asset into your Android project. You can follow the instructions linked in the flyout or follow these summarized instructions:

• In Android Studio, right-click on the “drawable” folder and select “New” » “Vector Asset”.
• From there, for “Asset Type”, select “Local file (SVG, PSD)”
• Enter a name for the icon
• Enter the path to your icon, or use the folder icon to choose the icon in your file explorer
• Press the “Next” button
• Finally, press the “Finish” button.

That’s it! You can now start using the icon just like any other icon you’ve used in the past. Your app is now on its way to adopting Material You.