iconsfont-awesomekendo-ui-angular2kendo-tabstrip

How to add icon in kendo UI Angular TabStrip Title?

How to add any type of icon classes (e.g font awesome icons) in kendo UI Angular TabStrip title? Currently tabStrip title is set using [title] property.

Solution

  • You can utilize the kendoTabTitle directive to provide a custom template to the tab title. (Reference)

    To work with a custom template, nest the kendoTabTitle directive inside the kendo-tabstrip-tab tag.

    <kendo-tabstrip>
    <kendo-tabstrip-tab ...>
        <ng-template kendoTabTitle>
            My Title (even with icons)
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip