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%|
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.
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)|
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.