Put icon to SfTabItem

Hello Syncfusion.

I;m developing an application with tabview, i've been reading the documentation for put an icon in the tab header, but i dont understand, if we have to work with Metro Studio and just there export the font icons or if we can use images, can u help me bring me an example with step by step,

Hope ur answer, thanks a lot!

1 Reply

PA Paul Anderson S Syncfusion Team September 7, 2018 10:22 AM UTC

Hi Carlos, 
 
Thanks for using Syncfusion products. 
 
Query 1: Export the FontIcon from the metro studio. 
 
We can create a project in Metro studio and export as Font file with the required icons. We have attached a video for reference. Please have the video from the following link 
 
 
Query 2: “put an Icon in the TabHeader” 
 
We have to define the FontIcon FontFamily with different type for Android, iOS and UWP. So we have defined as common in the ResourceDictionary and used in the SfTabView. 
 
<ResourceDictionary>  
<OnPlatform x:TypeArguments="x:String" x:Key="fontFamily" iOS="TabIcons" Android="TabIcons.ttf" UWP="TabIcons.ttf#TabIcons" />  
</ResourceDictionary>  
// . . . //  
<tabview:SfTabItem Title="Calls" IconFont="a" FontIconFontColor="LightBlue" FontIconFontSize="20" FontIconFontFamily="{StaticResource fontFamily}"/> 
 
  
We have created a sample for adding the Icons in the TabHeader. Please have the sample from the following link 
 
 
Please read the given instruction for how to add the font icons from the following link 
 
 
Query 3: “Use Images for TabHeader”. 
 
This can be achieved by using the CustomHeader. In that we can add images and label directly inside the Grid. That grid is added into the TabItem.HeaderContent. 
 
We have created a sample by using the CustomHeader. Please have the sample from the following link 
 
Please let us know if you have any other concern. 
 
Regards, 
Paul Anderson 
20

Loader.
Up arrow icon