We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: Xamarin.Forms |
Control: SfBadgeView |
Published Date: April 3, 2020 |
Last Revised Date: December 30, 2020

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

 

 

 

 

 

 

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment
Comments
Pavlo
Dec 23, 2020

Hey! Now that Xamarin introduced embedded fonts will they work with BadgView? If yes, i think it would be quite helpful to update this article

Reply
Sheik Syed Abthaheer M [Syncfusion]
Dec 30, 2020

Hi Pavlo,

Yes, the Badge view supports embedded fonts. We have updated this article using Xamarin embedded fonts support.

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon