In Metro apps, the Metro design is everywhere and that’s pretty cool ! <\/p>\n

When you start an application, you want and need it to be compliant with this theme and one main part of it are icons.<\/p>\n

What you may not know is that there is already a lot of icons available for you out of the box in any Metro app<\/strong>.<\/p>\n

Let’s discover them !<\/p>\n

<\/p>\n

I don’t get the picture…<\/h2>\n

When I first looked for the icons, I first searched for pictures<\/strong>. I found none of them.
\nSo I digged a little more on the sample and I found out that icons where here as a Font.<\/strong><\/p>\n

This is in fact a really good idea for several reasons<\/strong> :<\/p>\n

\n
1. Fonts are vectorial.<\/li>\n
2. You can choose the colors of the icons just by changing a parameters.<\/li>\n
3. No need to add a lot of images files to your project<\/li>\n
4. It’s really easy to use\/code !<\/li>\n<\/ol>\n

   Also, the font name is not the same in an HTML5 project than in an XAML one :<\/p>\n

   \n
   • an HTML5 app will use “Segoe UI Command” as Font family but “Segoe UI Symbol” as local name<\/li>\n
   • a XAML app will use Segoe UI Symbol<\/li>\n<\/ul>\n

     Which icons are available ?<\/h2>\n

     Each icon is represented by it’s hexadecimal value. These values are the same in both langages.
     \n<\/strong><\/p>\n

     XAML<\/h3>\n

     My first idea was to create a XAML app which will list them all and display them in a GridView.
     \nIt’s pretty easy to do, here is the C# which creates the list :
     \n[csharp]
     \n\/\/create a list of my custom class CharAvailable
     \nList<CharAvailable> characters = new List<CharAvailable>();<\/p>\n

     \/\/we will not cycle trough all the font values
     \nvar starter = 0xE10F – 200;
     \nvar ender = starter + 1000;<\/p>\n

     \/\/Create the character list
     \nfor (int i = starter; i < ender; i++)
     \n{
     \n characters.Add(new CharAvailable() {
     \n Value = string.Format("0x{0:X} : ", i),
     \n CharToDisplay = (char)i });
     \n}<\/p>\n

     \/\/Set it as datacontext
     \nDataContext = characters;
     \n[\/csharp]<\/p>\n

     And the XAML to display each item :
     \n[xml] <TextBlock
     \n Text="{Binding CharToDisplay}"
     \n FontFamily="Segoe UI Symbol"
     \n FontSize="34"
     \n \/>[\/xml]<\/p>\n

     HTML5 \/ Javascript<\/h3>\n

     When you want to display an icon in your HTML5 app, you just need to set the font family name to “Segoe UI Command” and to use the hexadecimal representation of the icon<\/strong>. Here is an example :
     \n[html]
     \n<p style="font-family: "Segoe UI Command";src:local("Segoe UI Symbol");">&#E195<\/p>
     \n[\/html]<\/p>\n

     Also, these icons are used by commands<\/strong> and you can then set the name of the icon as a shortcut instead of the hexadecimal value<\/strong>. For example here is how you can define a ‘favorite’ app bar command:
     \n[javascript]
     \n{id:’favorite’, icon:’favorite’, section: ‘selection’, onclick: iLoveIt}
     \n[\/javascript]<\/p>\n

     The full list of shortcut <\/em>is available in the ui.js file (thank you Tom for the tip!<\/a>). <\/p>\n

     I also created a PDF which list them all for easy retrieval. You can find it here<\/a>.<\/p>\n

     <\/a><\/a><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

     In Metro apps, the Metro design is everywhere and that’s pretty cool ! When you start an application, you want and need it to be compliant with this theme and one main part of it…<\/p>\n","protected":false},"author":3,"featured_media":1092,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[28,5],"tags":[32,33,30,34,29,24,31],"_links":{"self":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1080"}],"collection":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/comments?post=1080"}],"version-history":[{"count":19,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1080\/revisions"}],"predecessor-version":[{"id":1166,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/posts\/1080\/revisions\/1166"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media\/1092"}],"wp:attachment":[{"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/media?parent=1080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/categories?post=1080"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jonathanantoine.com\/wp-json\/wp\/v2\/tags?post=1080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}