TabStrip with icon in tab?

[Brian Vallelunga]

I'm trying to put an icon in a tab, but to do so in a repeatable manner for various tab strips throughout my application. I know I can do the following:

<kendo-tabstrip>
    <kendo-tabstrip-tab>
        <ng-template kendoTabTitle>
              <img src="/images/myicon.png" style="padding-right: 10px;" /> My Tab
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

The problem is that this is tedious and error-prone when repeated many times. I was thinking of making a directive that I could attach to the kendo-tabstrip-tab component that would override the template, but I'm unsure how to do that and my searches haven't revealed anything. Any suggestions?

[Dimiter Topalov]

Hi Brian,

The most straight-forward approach seems to create the Tabs dynamically based on an array of tab configuration options objects, and provide the desired icon in the following manner:

https://stackblitz.com/edit/angular-dgq181?file=app/app.component.ts

This will also allow for providing different image for each tab.

You can also add icons via CSS, e.g.:

https://stackblitz.com/edit/angular-rjrxg2?file=app/app.component.ts (the same icon will be used for all tabs)

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik