Using Android's Material Icons in your UWP app

Android’s Material design language contains a vast collection of icons.
UWP has it’s own icon collection based on a symbol font (Segoe MDL2 Assets).
If you like Android’s icons more, do not despair though!
It is easy to use the Material icons in your UWP app.

Google does provide bitmap and vector images. Vector images will automatically scale to any size without loss of quality. Unfortunately these vector images are not compatible with XAML. For this reason, I will focus on using the bitmap images.

The easiest way of getting all the Material Design icons is to clone Google’s repository from GitHub

Getting the Material Design Icons from GitHub

git clone https://github.com/google/material-design-icons.git

Android scaling versus UWP scaling

Android expects images to be scaled for several screen densities. UWP supports auto scaling using percentages. It is possible to map most of the Android scale factors to UWP scale percentages. The mapping is not complete, but it doesn’t need to be: UWP chooses the image that is the best fit and will resize it when needed.

Android Density Android Scaling UWP Scaling
medium (m) 1.0x (baseline) 100%
- - 125%
high (h) 1.5x 150%
extra-high (xh) 2.0x 200%
extra-extra-high (xxh) 3.0x -
extra-extra-extra-high (xxxh) 4.0x 400%

Material Design Icon Sizes

On Android, sizes are measured in density-independent pixels (dp). On UWP, sizes are measured in effective pixels (epx). They have different definitions, but are both meant to abstract away the actual pixel density. Android uses different icon sizes for different types of icons (18dp, 24dp, 36dp, and 48dp). Most icons should be 24dp, according to Android’s design guidelines. The actual image sizes (raw pixels) depend on the scale factor for the device.

Android UWP 18dp 24dp 36dp 48dp
mdpi 100% 18x18 24x24 36x36 48x48
hdpi 125% 27x27 36x36 54x54 72x72
xhdpi 200% 36x36 48x48 72x72 96x96
xxxhdpi 400% 72x72 96x96 144x144 192x192

Choosing an image size for use in UWP

I did some eperiments with different image sizes from the Material Design Icons on a laptop screen (100% scaling) and a mobile screen (400% scaling). The 24dp icons look like a good candidate for use on buttons and toolbars. They should be rendered at 24x24 epx to make them comparable in size with AppBarButton icons specified by the Symbol property.

Add icon images to the Assets folder

Let’s assume that we want to use the ic_call_black icon in our app.
We need four images from the Android set (m, h, xh, xxxh), put scaling information in the file names place them in the Assets folder of your app:

Android UWP (Assets folder)
drawable-mdpi/ic_call_black_24dp.png ic_call_black_24dp.png
drawable-hdpi/ic_call_black_24dp.png ic_call_black_24dp.scale-150.png
drawable-xhdpi/ic_call_black_24dp.png ic_call_black_24dp.scale-200.png
drawable-xxxhdpi/ic_call_black_24dp.png ic_call_black_24dp.scale-400.png

Use the icons from XAML

In XAML, this image can be used as follows:

<BitmapIcon Foreground="Blue" Width="24" Height="24"
            UriSource="ms-appx:///Assets/ic_call_black_24dp.png" />

The BitmapIcon control is probably the best control for displaying icon images. The foreground color will be applied to all non-transparent pixels in the image. Note that the scale information should not be used in UriSource: UWP automatically picks the right image depending on the device and resolution.

The BitmapIcon control can be used within a Button or AppBarButton control. However, the AppBarButton control expects an image size of 20x20epx (effective pixels).
But we want the icon to be 24x24epx. To AppBarButton can be forced to show the icon at 24x24epx, using a negative margin on the BitmapIcon:

<AppBarButton Label="Call">
        <BitmapIcon Foreground="Black" Margin="-2" Width="24"         
                    UriSource="ms-appx:///Assets/drawable-hdpi/ic_call_black_24dp.png" />
</AppBarButton>

Without the negative margin, the AppBarButton control will clip the image at 20x20epx.