How to create icons similar to Segoe MDL2 Assets in UWP

Question

as I said, Segoe MDL2 Assets has many icons, but not enough. Usually we want to use our own icons.

But there is one problem, our own icons can't auto suite for both light and dark themes, while the segoe icons can.

So, anybody know how? Thanks :)

Answer 1

I may be wrong, but if you use your own custom font - the icons should get appropriate colors (assuming that your font isn't already colored). If you just use a Path element - you'd probably need to specify a ThemeResource for its Foreground and define theme specific resources (or just use one that the platform provides).

Answer 2

If you want the icon font to be of the right color you'll have to export as a font (ie ttf ) and not as ico

There are few online tools to convert your PNG assets to a font file

• https://icomoon.io/app/#/select
• http://fontastic.me/

Once you have a font file you can use it in your app, specifying the font family in XAML

<TextBlock Text="&#xEB52; FontFamily="/Assets/Fonts/my-font.ttf#My Font"/>

You can also create a new FontFamily if you don't want to specify the path each time https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.fontfamily