Having trouble getting help?
Contact Support
Contact Support
Setting the FontIcon to SfChip
3 Sep 20203 minutes to read
SfChip is supported to display the font icon by setting FontImageSource
to its ImageSource property with following below steps.
Custom font file should be added to all the platform projects in specific location
-
Android
- Add a custom font file in theAssets
folder and set theBuild Action
toAndroidAsset
for the font file. -
iOS
- Add a custom font file in theResources
folder and set theBuild Action
toBundleResource
. Then, ensure that the copy to output directory is set toAlwaysCopy
. -
UWP
- Add a custom font file in theAssets
folder and the setBuild Action
toContent
.
NOTE
For iOS, you should be added a custom font file in the info.plist file as demonstrated in below.
<dict>
...
<key>UIAppFonts</key>
<array>
<string>chip_Segoe MDL2 Assets.ttf</string>
...
</array>
</dict>
Create the instance for FontImageSource
and set to ImageSource
property of SfChip as shown in the below code snippet.
<buttons:SfChip x:Name="Chip"
Text="Syncfusion"
ShowIcon="True">
<buttons:SfChip.ImageSource>
<FontImageSource Glyph=""
Size="40">
<FontImageSource.FontFamily>
<OnPlatform x:TypeArguments="x:String" >
<On Platform="Android" Value="chip_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets"/>
<On Platform="UWP" Value="Assets/chip_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets"/>
<On Platform="iOS" Value="Segoe MDL2 Assets"/>
</OnPlatform>
</FontImageSource.FontFamily>
</FontImageSource>
</buttons:SfChip.ImageSource>
</buttons:SfChip>
SfChip chip = new SfChip();
chip.ShowIcon = true;
chip.Text = "Syncfusion";
var fontImageSource = new FontImageSource();
fontImageSource.Glyph = "\uEB52";
fontImageSource.Size = 40;
if (Device.RuntimePlatform == Device.Android)
{
fontImageSource.FontFamily = "chip_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets";
}
else if(Device.RuntimePlatform == Device.UWP)
{
fontImageSource.FontFamily = "Assets/chip_Segoe MDL2 Assets.ttf#Segoe MDL2 Assets";
}
else if(Device.RuntimePlatform == Device.iOS)
{
fontImageSource.FontFamily = "Segoe MDL2 Assets";
}
chip.ImageSource = fontImageSource;
NOTE
FontImageSource supported from Xamarin.Forms version 3.6 onwards.