UWP – iconfy your design ( yep no SVG ;) )

So, been seeing a lot of SVG support being introduced into UWP to get vector images. I love this evolution, but somehow I still love how fonts work and mostly I still go that route if I need some icon representation inside an UWP app.
Fonts also easily scale, by setting the font size, what often results in better outlining with text being set on the same size! Adding color is also no problem and depending on what library you are using there is often also a full filled version as an outlined version available for a given icon.

So let me show you this alternative way on how you can use a great open source icon library to good use inside your UWP apps, through their available font.

First up go to this great icon library called Material Design Icons, here select the Download button and in the popup window select the Download the webfont button. This will contain the materialdesignicons-webfont.ttf that we will use in our UWP app.
To use it in your app, place the TTF inside your Assets folder.

Now that you have the font as an asset, you’ll still need to enable its usage in xaml. To do this, we’ll first add a reference to the font in a ResourceDictionary.
Add following entry in your resource dictionary :

Important note : the code reference should have the correct font name, otherwise it will not be visible…

After this, we are able to use it in our app, I tend to predefine some TextBlock style with default values so I can reuse these throughout my code.

Now that the style is available for any TextBlock you want to use, we can add those in our UI.
For example if you want to add an expand symbol to an image to indicate the user can enlarge it, we just select a good icon from the font and place a TextBlock inside a button on the image.
Now the most difficult part is actually getting hold of the actual text representing a given icon.
To get this, you’ll need to install the TTF in windows ( right click on the font and select install ) and use the Windows Character Map tool to copy the value.

Select a given icon and press copy to get hold of the actual value

screen-shot-2017-02-10-at-00-13-52

Only thing left to do is define an button and add a TextBlock to it with the font value.
Note : in the code preview below this will not be shown because the font value can not be rendered. But inside visual studio you will see a ? representation.

If everything is added correctly you’ll be presented with a nice icon button.

screen-shot-2017-02-10-at-00-19-16

As ever this code is available on my GitHub here…
Happy coding and yep SVG is good but not always needed 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *