Font Icon Images

• Apr 22, 2024
• 2 minutes to read

The latest Windows versions ship with built-in icon fonts that contain hundreds of icons (Segoe MDL2 Assets in Windows 10 and Segoe Fluent Icons in Windows 11) you can use in DevExpress Controls.

Important

Icon fonts must be installed on the system because font icons are rendered based on system fonts. If you run an application that displays font icons on Windows 7/8, placeholders (empty squares) are displayed instead of icon images.

Assign Font Icons to UI Elements

The FontIconSourceExtension allows you to use a font icon as a vector ImageSource for WPF controls.

At Design-Time

1. Invoke the DevExpress Image Picker and switch to the Font Icons tab.
2. Select a font icon and palette color.
3. Click OK.

The following XAML code is generated:

XAML

<dxb:BarButtonItem Glyph="{dx:FontIconSource ColorName=Yellow, Glyph=59246}"/>

In Code

You can use the following techniques to assign font icons:

• Precede a unicode value (from the Segoe MDL2 Assets or Segoe Fluent Icons table) with 0x and assign it to the FontIconSourceExtension.Glyph property:

  XAML

  <dxb:BarButtonItem Glyph="{dx:FontIconSource Glyph=0xf0b4}"/>
  

• Copy predefined FontIconSourceExtension markup from the standalone DevExpress Image Picker:

  

  XAML

  <dxb:BarButtonItem Glyph="{dx:FontIconSource 59189}"/>
  

Customize Font Icons

Choose Font

The application displays icons from the most recent icon font available in the system. For example, the “Segoe Fluent Icons” font is used as the default font if both “Segoe Fluent Icons” and “Segoe MDL2 Assets” fonts are installed.

You can use the FontIconSourceExtension.FontFamily property to specify the default icon font:

XAML

<dxb:BarButtonItem Glyph="{dx:FontIconSource Glyph=0xf0b4, FontFamily=SegoeMDL2Assets}"/>

Colorize Icons

The FontIconSourceExtension.ColorName property allows you to choose an icon color from predefined values (Red, Green, Blue, Yellow, Black, and White). These colors are adjusted to match the applied DevExpress Theme.

XAML

<dxb:BarButtonItem Glyph="{dx:FontIconSource Glyph=59246, ColorName=Yellow}"/>

You can omit the color adjustment and apply custom colors to icons. To do this, use the WpfSvgPalette class as demonstrated in the following help topic: Change Palette Colors.

XAML

<dxb:BarButtonItem Glyph="{dx:FontIconSource Glyph=59246}">
    <dx:WpfSvgPalette.Palette>
        <dx:WpfSvgPalette>
            <SolidColorBrush x:Key="Black" Color="Aqua"/>
        </dx:WpfSvgPalette>
    </dx:WpfSvgPalette.Palette>
</dxb:BarButtonItem>