Using AppBar icons on classic buttons

You can create fancy application bars in your Windows Store apps thanks to the 194 Metro style icons provided in the WinJS.UI.AppBarIcon object. Just add the data-win-control attribute to a div and a button, and they will be transformed into the appbar:

<div id="appbar" data-win-control="WinJS.UI.AppBar">
    data-win-options="{id:'cmdPrev', label:'Previous', icon:'previous'}"

One of the interesting questions is, that what previous means in the above code? You can find the name of the icons in the WinJS.UI.AppBarIcon object, which is loaded from the ui.strings.js file of WinJS:


This is a classic resource file loaded with values like this:

"appBarIcons\\previous": "\uE100", // ? group:Media
"appBarIcons\\next":     "\uE101", // ? group:Media
"appBarIcons\\play":     "\uE102", // ? group:Media
"appBarIcons\\pause":    "\uE103", // ? group:Media
"appBarIcons\\edit":     "\uE104", // ? group:File
"appBarIcons\\save":     "\uE105", // ? group:File
"appBarIcons\\clear":    "\uE106", // ? group:File
"appBarIcons\\delete":   "\uE107", // ? group:File
"appBarIcons\\remove":   "\uE108", // ? group:File

What the \uE100 value means? The appbar relies on the Segoe UI Symbol font which contains bunch of icons, and the given value is the code of the character:


So actually appbar doesn’t display any image, it uses characters as icons, which is a brilliant solution, because it is faster, and you don’t have to worry about sizing.

You can catch it all in the DOM Explorer of Visual Studio, except the most important part, because Visual Studio cannot display these special character entities (that’s why there are question marks in the previous code snippet). Thankfully Jamie Rodriguez created a simple function that lists all WinJS.UI.AppBarIcon item.

Because the appbar is a mutation of the classic <button>  element, you can use the same technique in your own code. This is how you can reference to character entities in the markup:


So first &#x then the code, and finally a semicolon. And the result is:


Naturally, icons look a bit different in a rectangular button than in a circle, so I made a simple function to display all icons in a button:

for( var icon in WinJS.UI.AppBarIcon ) {
  var btn = document.createElement( 'button' );
  var hex = WinJS.Resources._getWinJSString( "ui/appBarIcons/" + icon )
                 .value.charCodeAt( 0 );
  btn.innerHTML = '{0} (&amp;#x{1};): &#x{1};'.format( icon, hex.toString( 16 ) );
  document.body.appendChild( btn );

Here is the full gallery (click for the high resolution image):


Of course you can use not only those characters that are available in the WinJS.UI.AppBarIcon object, but any character of any font, which is much more convenient, than sizing and positioning img elements…



4 thoughts on “Using AppBar icons on classic buttons

  1. Pingback: WOWZAPP preparation materials « Codes from the field

  2. Pingback: Fix Ui.strings.js Errors - Windows XP, Vista, 7 & 8

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s