Get whole sets of vector icons using … Fonts!
Finding icons is a tedious task for most developers. In this post I will demonstrate how to use “symbolic” fonts in your WPF or Silverlight applications, which provide the following benefits:
- Vector icons that are smoothly scalable
- Potentially better performance, using the platforms’ optimized text rendering stack
- Get a whole set of icons in single resource file (Silverlight), or no embedded resource at all (WPF)
- Caveat: fonts are only rendered using a single brush. Just like any other text content you can make your own fancy brush, but your icons are defined monochromatically
For WPF applications, there is nothing to do but specify a locally available font for the FontFamily property:
<TextBlock FontFamily="Wingdings" Text="A B C 7 8 9"/>
For Silverlight 2 or later application, leverage the embedded font feature by embedding your font files as resources. Then reference them using the following syntax:
<TextBlock FontFamily="MyFontFile.ttf#My Font" Text="A B C 7 8 9"/>
or, if loading, your font from a different assembly
<TextBlock FontFamily="/MyAssembly;Component/MyFontFile.ttf#My Font" Text="A B C 7 8 9"/>
Simply specifying the font name like in WPF will work most of the time since Silverlight leverages the OS’ font system to resolve font families, but this is not good practice. For example Wingdings is not available by default on older versions of Mac OS X, which will cause Silverlight to fall back to the portable font on this platform.
Thus, make sure that the fonts you use are embedded in your application and that you have the right to redistribute them.
Important: Be aware that most fonts usually available on your system, such as Wingdings on Windows, are copyrighted and not freely redistributable. You can get freely redistributable fonts from the web using your favorite search engine or contact the copyright holder to get information about font licensing.
As always, I hope you find this trick useful!