San Bei Ji

The Material Design system icon set contains UI elements you’d commonly encounter in an app, and Material 3 is the latest iteration. Material icons are a great resource for Android developers, and using these icons will save you from having to design the icons yourself and save your users from having to relearn new iconographic concepts. In most cases, it is preferable to work with vector assets in your Android project, because this allows you to customize and parameterize your image assets programmatically.

To use a Material Design system icon in your app project, do the following:

1. Visit fonts.google.com/icons and identify the icon you’d like to work with. The search tool at the top of the page is great for finding good candidates.
2. When you click on an icon, a side panel opens up on the right side of the page, with three tabs for Web, Android, and iOS. Leave the Web tab selected, as I think this route is more straightforward as of this writing.
3. Click the SVG button at the bottom of the right side panel to download the vector-based SVG copy of the selected asset.
4. In Android Studio select File > New > Vector Asset. The Asset Studio window appears.
5. In the Asset Studio window, do the following:
   1. For asset type, select Local file (SVG, PSD).
   2. The path is where your SVG was downloaded. Click the folder icon to navigate to your SVG file and select it.
   3. Add a name for your asset. I use simple descriptions such as “star”, unless I have different customizations. Yes, this field appears above the path field, but when you select a file Android Studio overwrites whatever you put there. So I always do this step after selecting the file in the path field.
   4. In most cases, you can leave the size field and opacity fields at their defaults.
      
6. Click Next. The Confirm Icon Path screen appears. Note the image will be added to src/main/res/drawable by default, which is fine for now. Click Finish, and your SVG is converted into an Android-optimized XML image in your drawable directory.

Yay, you’ve added the asset to your project! Now let’s bring it into your layout.

In the Jetpack Compose view you’d like to add your icon to, you can use Icon() to bring in your new asset into your layout:

Icon(
    painter = painterResource(id = R.drawable.star),
    contentDescription = "Star",
    Modifier
        .width(50.dp)
        .height(50.dp)
)

Use the painter argument to point to your newly-imported XML asset, which in this case is painterResource(id = R.drawable.star). The contentDescription is what is read out by screen readers. And you can control the size of your icon with Modifier width and height values, as shown.

Here’s a complete example dropped in a Column view:

fun DetailScreen(
) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray)
            .padding(horizontal = 16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Text(
            text = "You're a star!",
            style = MaterialTheme.typography.headlineMedium,
            modifier = Modifier.padding(bottom = 16.dp),
        )
        Spacer(modifier = Modifier.height(12.dp))
        val iconSize = 65.dp
        Icon(
            painter = painterResource(id = R.drawable.star),
            contentDescription = "Star",
            Modifier
                .width(iconSize)
                .height(iconSize)
        )
    }
}

This view should render in your app like this!