With the new Office2016 theme we introduced a new approach to add icons and icon-like images. We are providing font "glyphs" via the TelerikWebUI font. The glyphs are vector symbols that can be used as information-carrying icons or interaction indicators.

As of R1 2018 we recommend using the new RadGlyph class and markup extension to visualize font glyphs. It has a number of advantages which are documented in this article.

This article explains the specifics of this approach, demonstrates usage with examples and provides a reference sheet for the available glyphs.

The TelerikWebUI font provides over 400 individual glyphs. We have chosen this approach to define the icons in the Office2016 because it provides a number of advantages and benefits.

The glyphs are vector paths which are easily scalable without loss of quality.

There is a wide range of different beautiful built-in glyphs to choose from.

They are easily colored – since they are text shapes. It is achieved by setting a Foreground color, which allows their usage in scenarios where the background of the control changes between light and dark color in different interaction states – e.g. buttons.

They are all contained in the small font file and available for use with the inclusion of the Telerik.Windows.Controls assembly and merging the needed resource dictionary for easier referencing.

They are available for use in any of our themes, when the needed resources are included. They are not specific for the Office2016.

The recommended size for the TelerikWebUI glyphs is 16 or any multiple of it (e.g. 32, 48, 64 etc.) since they are designed for 16px height. However, they are vector paths and, like any font, would look clean, distinguishable, non-pixelated and beautiful in almost any size, which is their advantage to raster images and icons.

The available glyphs are separated in several groups, based on their usage:

Example 1: Using glyphs

The content of the text-hosting element is set in a string with format &#xe[3-digit number];

Since this string carries no meaning for the glyph it relates to, we are providing a dictionary with key-value pairs for all available glyphs. This enables the usage of more meaningful references for the needed glyphs.

Example 2: Setting a glyph

Furthermore that allows inclusions to the TelerikWebUI font as it is extended occasionally, sometimes shifting the numbers of some of the existing glyphs. The resource dictionary is updated and shipped with the font in the assembly with every change, without a need for changes in the already existing projects.

In order to use the glyph references and the font as StaticResources in a project, you need to include the Telerik.Windows.Controls.dll and merge the required dictionary in the application resources.

Example 3: Adding the ResourceDictionary with the fonts

In the UI for WPF controls the needed resources are provided, so this inclusion is required only in case you would like to use the font and the glyphs in your custom project.

Changing the glyphs’ color is achieved by changing the foreground of the holding element, in the same manner as the foreground of a regular font. This is extremely useful in scenarios when the background of the control changes in different interaction states (see Example 4).

Figure 2: Dynamic change of the glyph icon when RadToggleButton is toggled

If you wish to bind glyphs from your view model, you need to parse the code of the glyph to a single character for it can be displayed as expected. Otherwise, all characters of the code will be displayed as-is. This can be achieved either by using a converter for your bindings, or by doing the conversion inside your viewmodel.

Example 6 demonstrates how this can be done with an IValueConverter but the same approach can be used directly in your viewmodel.

If, for example, you have a Glyph property in your viewmodel which is of type string and has the value "&#xe11b;", you can bind it to the Text property of a TextBlock as demonstrated in Example 7 to display the close glyph.