Setting a font icon on SfChip

27 Jul 20263 minutes to read

SfChip supports displaying a font icon by assigning a FontImageSource to its ImageSource property.

Prerequisites

Before using the SfChip, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Core

For a step-by-step setup, refer to the Getting Started documentation.

Property Reference

Property Type Default Description
ImageSource ImageSource null The image displayed inside the chip. Accepts any MAUI ImageSource, including FontImageSource.
ShowIcon bool false When true, the chip reserves space for and renders the icon defined by ImageSource.
ImageSize double 18 The size (in device-independent units) of the icon area inside the chip.

Set the FontImageSource

Create a FontImageSource, set its Glyph, Size, Color, and FontFamily, then assign it to SfChip.ImageSource. Also set ShowIcon="True" to ensure the chip renders the icon.

<chip:SfChip x:Name="chip"
             Text="Syncfusion"
             ShowIcon="True"
             FontSize="17"
             TextColor="White"
             Background="#512dcd"
             WidthRequest="120"
             HeightRequest="40"
             ImageSize="15"
             Padding="0,0,0,2">
    <chip:SfChip.ImageSource>
        <FontImageSource Glyph="&#xEB52;"
                         Size="12"
                         Color="White"
                         FontFamily="Segoe MDL2 Assets" />
    </chip:SfChip.ImageSource>
</chip:SfChip>
var fontImageSource = new FontImageSource
{
    Glyph = "\uEB52",
    Size = 12,
    Color = Colors.White,
    FontFamily = "Segoe MDL2 Assets"
};

var chip = new SfChip
{
    ShowIcon = true,
    Text = "Syncfusion",
    FontSize = 17,
    TextColor = Colors.White,
    Background = Color.FromArgb("#512dcd"),
    WidthRequest = 120,
    HeightRequest = 40,
    ImageSize = 15,
    Padding = new Thickness(0, 0, 0, 2),
    ImageSource = fontImageSource
};

.NET MAUI chip icon font support

See Also