Glyphs
With the new Material theme we have introduced a new approach to add icons and icon-like images. We are providing font "glyphs" via custom fonts. The glyphs are vector symbols that can be used as information-carrying icons or interaction indicators. 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. They are not specific for the Material theme.
Font TelerikWebUI
The TelerikWebUI font provides over 400 individual glyphs. We have chosen this approach to define the icons in the Material because it provides a number of advantages and benefits.
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
The following article lists all available glyphs from the TelerikWebUI font along with their names, number and string values: Glyphs Reference.
As of R1 2022, it is possible to access the glyphs directly using their names from the table in the above referred help article.
string fontName = TelerikWebUIFont.Name;
string glyphText= TelerikWebUIFont.GlyphMarkerPinTarget;
Dim fontName As String = TelerikWebUIFont.Name
Dim glyphText As String = TelerikWebUIFont.GlyphMarkerPinTarget
Font Awesome
This is an open source font consisting of close to 1400 icons. The Font Awesome pack has three different types.
- Awesome-Brands-Regular
- Awesome-Regular
- Awesome-Solid
The available Font Awesome icons are listed here: Font Awesome
Using Glyphs
The glyphs are basically text shapes, so they need to be hosted in a control with a text contents. The following example shows how you can use the Glyphs with RadLabel
TelerikWebUI Example
var font1 = ThemeResolutionService.GetCustomFont("TelerikWebUI");
radLabel1.LabelElement.CustomFont = font1.Name;
radLabel1.Text = "\ue920 | \ue812 | \ue13A";
Dim font1 = ThemeResolutionService.GetCustomFont("TelerikWebUI")
radLabel1.LabelElement.CustomFont = font1.Name
radLabel1.Text = ChrW(&HE920).ToString() & " | " & ChrW(&HE812).ToString() & " | " & ChrW(&HE13A).ToString()
The bellow image shows the results:
Font Awesome Example
this.radLabel1.LabelElement.CustomFont = "Font Awesome 5 Free Regular";
this.radLabel2.LabelElement.CustomFont = "Font Awesome 5 Free Solid";
this.radLabel3.LabelElement.CustomFont = "Font Awesome 5 Brands Regular";
// The text below consists of Unicode glyphs which can be copied from the Font Awesome website:
// https://fontawesome.com/icons?d=gallery&m=free
this.radLabel1.Text = "\uF017 \uF4AD \uF0A4";
this.radLabel2.Text = "\uF1EB \uF0AD \uF19C";
this.radLabel3.Text = "\uF26B \uF293 \uF3B8";
this.radLabel1.LabelElement.CustomFontSize =
this.radLabel2.LabelElement.CustomFontSize =
this.radLabel3.LabelElement.CustomFontSize = 30;
this.radLabel1.LabelElement.LabelText.TextRenderingHint =
this.radLabel2.LabelElement.LabelText.TextRenderingHint =
this.radLabel3.LabelElement.LabelText.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias;
Me.radLabel1.LabelElement.CustomFont = "Font Awesome 5 Free Regular"
Me.radLabel2.LabelElement.CustomFont = "Font Awesome 5 Free Solid"
Me.radLabel3.LabelElement.CustomFont = "Font Awesome 5 Brands Regular"
Me.radLabel1.Text = "\uF017 \uF4AD \uF0A4"
Me.radLabel2.Text = "\uF1EB \uF0AD \uF19C"
Me.radLabel3.Text = "\uF26B \uF293 \uF3B8"
Me.radLabel1.LabelElement.CustomFontSize = Me.radLabel2.LabelElement.CustomFontSize = Me.radLabel3.LabelElement.CustomFontSize = 30
Me.radLabel1.LabelElement.LabelText.TextRenderingHint = Me.radLabel2.LabelElement.LabelText.TextRenderingHint = Me.radLabel3.LabelElement.LabelText.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias
The bellow image shows the results:
