In the MainPage.xaml page, the UXNavigationButton is wrapped inside UXItemsControl. The ItemContainerStyle property of UXItemsControl – is set to {StaticResource AppButtonStyle} – plays an important role in providing the effect of Metro style. *you can try to remove the ItemContainerStyle property and watch that the Metro style effect will no longer available.

Instead of using image for the icon UXNavigationButton, it uses Segoe UI Symbol font which is defined in the Tag property.

I enclosed the font file as attachment. Please have the font file installed in your development PC.

The step-by-step below shows how to modify the “icon-like” on the navigation button control.

1. Install the Segoe UI Symbol font;
2. Open the project in VS 2012;
3. Open MainPage.xaml page;
4. Select “About” UXNavigationButton;

   <Intersoft:UXNavigationButton Content="About" NavigateUri="/About" Tag="" />

5. For Windows 7 user, from the start menu click: start > All Programs > Accessories > System Tools > Character Map. For Windows 8 user, type “charmap” in the run command;
6. In the Character Map window, set the font to Segoe UI Symbol;
7. Select a character to copy. For example, select the “thumbs up” character;
8. Press “Select” button and then click “Copy” button;
9. Now back to MainPage.xaml in VS 2012. Select the “About” button and set the content of “Tag” property by pasting the copied character in step #8;
10. Save the changes and watch that the “icon” of navigation button is now changed.

Hope this helps.

Thanks.  That works..however what would I do if wanted a different icon (not one from the Segoe font)?

Try to set the FontFamily property of UXNavigationButton with the desired font family as shown in the following snippet code.

<Intersoft:UXNavigationButton Content="Home" NavigateUri="/Home" IsDefaultNavigationSource="True" Tag=""
                                FontFamily="Wingdings" />

This should helps.