How to add a custom icon to the badge in Xamarin.Forms badge view (SfBadgeView)

This KB article explains how to add a custom icon to the badge using the font icon in the Xamarin badge view control. It has been achieved by setting the desired custom view icon text as BadgeText property of badge view and provide a corresponding icon font family to the FontFamily property of BadgeSetting as shown in the following code sample.

Step 1: Add the custom font file to your Xamarin.Forms shared project and mark it as an embedded resource.

Step 2: Register the font file with the assembly, in a file such as AssemblyInfo.cs using the ExportFont attribute in your shared project as shown in the following code example. An optional alias can also be specified.

AssemblyInfo.cs

using Xamarin.Forms;
 
[assembly: ExportFont("BadgeViewFont.ttf", Alias = "BadgeViewFont")]

Step 3: Initialize the SfBadgeView control by setting the BadgeText property as the desired custom view icon text and provide a corresponding icon font family to the FontFamily property of BadgeSetting as shown in the following code sample.

[XAML]

    <badge:SfBadgeView BadgeText="&#xe702;" HorizontalOptions="Center" VerticalOptions="Center">
        <Image Source="People.png"   VerticalOptions="Center"
                           HorizontalOptions="Center"
                           HeightRequest="70" WidthRequest="70"/>
        <badge:SfBadgeView.BadgeSettings>
            <badge:BadgeSetting Offset="-10,-10" Stroke="White" StrokeWidth="2" 
                                FontFamily="BadgeViewFont.ttf" BadgePosition="BottomRight">
            </badge:BadgeSetting>
        </badge:SfBadgeView.BadgeSettings>
    </badge:SfBadgeView>

Output:

View the sample from GitHub.

See also:

What are the ways for positioning the badge view

How to customize the badge in Xamarin.Forms SfBadgeView

How to add the default badge icon in badge view