[QuickTips] Universal Windows Platform - Using Icons with AppBarButton

Hey listen! First post with Windows apps development subject, more specifically speaking UWP development. Since Windows 10 things got mixed. Well, let’s get to the point…

Windows development has it’s pros and cons, and definitely using font icons and symbols to create sweet buttons is awesome, here goes some pros:

• Follows platform design style
• Makes user interface creation a little less troublesome
• Decreases app size

And a downside is having to find the code for the desired icon in the font family, we have character map to help, still is not that fun to do.

Pro tip: just hit windows key and type character map

In the code bellow I used a FontIcon instance with default font configured for that project, yet you may specify a font family.

FontIcon infoIcon = new FontIcon();
infoIcon.Glyph = "\uE946"; //Insert here any font code

AppBarButton button = new AppBarButton();
button.Icon = infoIcon;
//Add it to a command bar or to a custom control

Another nice way of inserting an icon is to use pre-defined symbols with the SymbolIcon class, it uses Segoe MDL2 Assets fonts as source, to find a symbols one just look up in the font file or bookmark Symbol enum documentation.

AppBarButton button = new AppBarButton();
button.Icon =  new SymbolIcon(Symbol.Help);
//Add it to a command bar or to a custom control

Pro tip: this can be done to TextBlock and other controls, not exactly the same, place &#xCHARHEX; i.e.  in the TextBlock’s text property

Before I go is important to leave this tip I found at Around Computing blog. He mentions MDL2 Helpers and ScottIsAFool/Mdl2Tool as alternatives for using typed accessors instead of coding your way into it, worth looking.