New to Telerik UI for WPF? Download free 30-day trial

Font Glyphs Overview

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.

You can find a list with all available glyphs in the reference sheet.

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:

  • Navigation and Layout
  • Action
  • Media
  • Toggle
  • Alert and Notification
  • Image
  • Editor
  • Map
  • Social
  • File

Using glyphs

The glyphs are basically text shapes, so they need to be hosted in a control with a text contents. Recommended for this is a TextBlock as it has no special styling.

Example 1: Using glyphs

<TextBlock FontFamily=”{StaticResource TelerikWebUI}”  
           Text=”{StaticResource GlyphHeart}”  
           Foreground=”{telerik:Office2016Resource ResourceKey=IconBrush}”/> 
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

<!-- Glyph string --> 
<TextBlock Text="&#xe101;" />  
<!-- Meaningful reference name --> 
<TextBlock Text="{StaticResource GlyphRedo}" />  
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

<ResourceDictionary Source="/Telerik.Windows.Controls;component/Themes/FontResources.xaml"/>  
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).

Example 4: Setting glyph foreground

<telerik:RadToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10"> 
    <TextBlock Text="{StaticResource GlyphLock}"  
               FontFamily="{StaticResource TelerikWebUI}"  
               Foreground="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter},  
               Path=(TextElement.Foreground)}" /> 

Figure 1: Updated glyph foreground based on the interaction state of the control - normal, mouse over and pressed

Example 5 demonstrates how to change the glyph based on a RadToggleButton being checked or unchecked.

Example 5: Dynamic glyph change

<telerik:RadToggleButton HorizontalAlignment="Center" VerticalAlignment="Center" Padding="10" > 
    <TextBlock FontFamily="{StaticResource TelerikWebUI}" FontSize="16" 
           Foreground="{Binding RelativeSource={RelativeSource AncestorType=ContentPresenter}, Path=(TextElement.Foreground)}" /> 
        <Style TargetType="TextBlock"> 
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type telerik:RadToggleButton}}, Path=IsChecked}" Value="True"> 
                    <Setter Property="Text" Value="{StaticResource GlyphUnlock}" /> 
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType={x:Type telerik:RadToggleButton}}, Path=IsChecked}" Value="False"> 
                    <Setter Property="Text" Value="{StaticResource GlyphLock}" /> 

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

Binding Glyphs

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 that 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.

Example 6: Using a converter to parse the glyph hex code

public class StringToGlyphConverter : IValueConverter  
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        if (value.GetType() != typeof(string)) 
            return null; 
        string glyph = (value as string).Substring(3, 4); // for example: &#xe11b; will become e11b 
        return (char)int.Parse(glyph, NumberStyles.HexNumber); 
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
        return null; 
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.

Example 7: Use the StringToGlyphConverter for the binding

<TextBlock FontFamily="{StaticResource TelerikWebUI}" Text="{Binding Glyph, Converter={StaticResource StringToGlyphConverter}}" /> 

Since R1 2019 the StringToGlyphConverter is built-in the UI for WPF suite so you can access it via the telerik namespace in xaml or code-behind. Read more about this in the Converters article.

See Also

In this article
Not finding the help you need? Improve this article