How to use Modern UI Icons in AppBarButton

Question

I'm developing a Windows 8.1 Store App. I have a CommandBar control with a couple of AppBarButtons inside. Using the standard icons is easy, I just set the icon property to the appropriate string like so :

<AppBarButton Icon="Download" Label="Download Files"/>

I'd like to use a couple of custom icons from the very nice free collection Modern UI Icons. Ideally, I'd like to be able to set the icon property in much the same way :

<AppBarButton Icon="transit.distance.to" Label="Distance to destination"/>

This would refer to this icon : PNG / XAML

Is this possible ?

If not, what are the alternatives ?

Tim Heuer proposes using a font file, although at present the font files available here only cover a sub-set of the icons, and also this code is quite unreadable :

<FontIcon FontFamily="ms-appx:///modernuiicons.ttf#Modern-UI-Icons---Social" Margin="0,2,0,0" Glyph="&#xe045;" FontSize="37.333" />

Would you believe that shows a twitter icon?!

Tim Heuer also proposes using vector data, and one of the commenters explains how the vector data can be rolled into a style. I could do that, but then I would have to copy and paste the path data for each icon I want to include ?

Should I be using the PNG files, as explained in this question ? That looks pretty messy as well.

What a nightmare!

Answer 1

I'm not sure what the nightmare part is -- you want to use a custom icon that isn't present in the 200+ supplied defaults. You have options:

1. Use SymbolIcon and supply your own font. You note that you don't like that the code feels unreadable. Unicode ranges are universally used for symbol fonts and I agree that Unicode isn't human-readable, but a simple code comment would help ;-) Fonts give you the most ease and flexibility because they are also vectors.

   1. PathIcon. You convert your image into vector geometries we can render. This would be the second best, but also requires a bit fine tuning of the vectors to get right. For people not familiar with working with geometries this can be annoying at first. Blend and Inkscape are helpful tools here.

   2. BitmapIcon. This would allow you to use your PNG, however you now must supply multiple of them for different scales and states. This is my least favorite option as it requires most work, but for some may be the simplest. Now your problem you will hit is there is an issue with BitmapIcon for non-rectangular shapes (which looks like your icon is). This won't have the fidelity you seek due to a bug in rasterizing.

   3. Contact metroicon author and see if he can put it into the font file so you can use option #1 :-)

Maybe this is what you're looking for:

<AppBarButton Label="Transit">
    <AppBarButton.Icon>
        <PathIcon Data="F1 M 3.912,17.38C 4.89067,17.38 5.688,18.2653 5.688,19.3586C 5.688,20.448 4.89067,21.3333 3.912,21.3333C 2.92667,21.3333 2.136,20.448 2.136,19.3586C 2.136,18.2653 2.92667,17.38 3.912,17.38 Z M 16,17.38C 16.984,17.38 17.776,18.2653 17.776,19.3586C 17.776,20.448 16.984,21.3333 16,21.3333C 15.016,21.3333 14.224,20.448 14.224,19.3586C 14.224,18.2653 15.016,17.38 16,17.38 Z M 21.3333,18.9626L 18.464,18.9626C 18.292,17.62 17.2547,16.5933 16,16.5933C 14.7453,16.5933 13.708,17.62 13.536,18.9626L 6.37467,18.9626C 6.20267,17.62 5.16667,16.5933 3.912,16.5933C 2.656,16.5933 1.62,17.62 1.448,18.9626L 0,18.9626L 0,10.2706C 0,9.396 0.636,8.69196 1.42133,8.69196L 19.5573,8.69196C 20.3387,8.69196 20.9787,9.396 20.9787,10.2706M 20.4427,10.2706L 19.1973,10.2706L 19.1973,15.8013L 20.62,15.8013M 17.776,13.432L 17.776,10.2706L 14.224,10.2706L 14.224,13.432M 13.5107,10.2706L 9.95333,10.2706L 9.95333,13.432L 13.5107,13.432M 9.24533,10.2706L 5.688,10.2706L 5.688,13.432L 9.24533,13.432M 4.97867,10.2706L 1.42133,10.2706L 1.42133,13.432L 4.97867,13.432M 14.5787,2.36932L 12.4427,0L 15.2867,0L 17.776,2.45862L 17.776,0L 19.1973,0L 19.1973,6.31732L 17.776,6.31732L 17.776,3.85864L 15.2867,6.31732L 12.4427,6.31732L 14.5787,3.948L 7.73467,3.948C 7.41733,5.31195 6.30267,6.31732 4.97867,6.31732C 3.40667,6.31732 2.136,4.90533 2.136,3.16132C 2.136,1.41064 3.40667,0 4.97867,0C 6.30267,0 7.41733,1.00531 7.73467,2.36932L 14.5787,2.36932 Z " HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </AppBarButton.Icon>
</AppBarButton>

Hope this helps!