We're only interested in the '.ttf' file so extract it from the zip file and copy it to the 'Assets' folder of your UWP app.įrom within VisualStudio - or better yet, Blend - add the '.ttf' file to the project, ensuring it's 'Build Action' is set to 'Content' and 'Copy to Output Directory' set to 'Do not copy' as shown below: This will compile all your assets into a zip file containing the font (in '.ttf' and '.woff' formats), svg and css assets. Repeat this for all the icons you want to use - I'll just stick with the one icon for now - then download the font by clicking the font download button (the 'down arrow' in the 'FONT' button). After a short pause while the file is uploaded to Glypter and processed, it'll appear in the grid slot you selected here I've added the icon to the 'A': Once it's downloaded, locate the file and drag it onto the Glypter grid in the desired location.

Once you've found the icon you want to use - lets use this one by Gareth - simply download the icon as an SVG. The Noun Project is a good resource containing an incredible number of high quality icons that can be used in commercial products for a small fee or via attribution. To get started, simply locating the SVG asset you'd like to use. Furthermore, you're easily able to present the required icons in the desired colour - by changing the TextBlock's Foreground brush - and size - by changing FontSize or embedding within the TextBlock within a ViewBox. Once you've built your font, it can be embedded in the app package and icons displayed by simply using a TextBlock element with the Text property set to the alpha-numeric code of the icon to display and the FontFamily set to the custom font. Should you need more than this, you can upgrade to a premium tier which allows you to work on multiple fonts of a much greater size. Glypter's free tier allows you to craft a single font, containing just basic alpha-numerics. This approach uses Glyphter - a free, online tool for converting SVG icons to fonts - to produce a custom font containing your SVG assets similar to fonts like Segoe MDL2 and FontAwesome. Here I present an extremely flexible way of using these assets that requires nothing more than drag-and-drop. While these approaches work ok they're normally a pain to author and use, often requiring custom converters to be written if the asset is to be used via any form of data binding. There are many ( many, many) ways to use SVG assets as icons in UWP / XAML apps, most requiring some form of DataTemplate or UserControl.

Wpf svg icon