Hi Saravanakumar
Thanks for contacting Syncfusion Support.
We have rendered tab component with header icons from font awesome. The iconCss property is used to specify the icon class that is used to render an icon in the tab header. By default, we have provided support for tab header with a predefined class name with icons. You can also add font awesome icons in the tab header using the header text property.
To use the Font Awesome icons, add the following line inside the <head> section of your HTML page.
|
Index.html
<!DOCTYPE html>
<html>
<head>
………………
</head>
</html> |
If you wish to add font awesome icons into tab header, you can simply give the element into the tab header text in the following way.
|
Default.html
<ejs-tab id="tab_default">
<e-tabitems>
<e-tabitem [header]='headerText[0]' [content]="content0"></e-tabitem> //Tab items
………
</e-tabitems>
</ejs-tab> |
Here, fa fa-user class is added for iconCss property.
|
Default.component.ts
public headerText: Object = [{ text: "Twitter", 'iconCss': 'fa fa-user' }] // Specified class name of your font awesome icons into tab header iconCss property
|
By default, icon position of tab header is left. If you change icon position as per your wish using iconPosition property.
Please find the below stackblitz link for your reference.
Regards,
M. Balaji
