Articles in this section
Category / Section

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

1 min read

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.

 

Set custom font file as 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:

Icon font in Xamarin BadgeView

 

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

 

 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments
Please  to leave a comment
Access denied
Access denied