Closable Tabs

The TabStrip enables you to render a close button inside its tabs.

You can enable this behavior for all tabs by using the closable option of the TabStrip, or for each individual tab through the closable option of the TabStripTab component.

The following example demonstrates how to configure closable tabs.

Configuring the Close Button Icon

You can change the close button icons of the tabs by using a predefined or custom icon and SVG icons.

The TabStrip enables you to customize the icon inside the close buttons of the tabs by using:

• closeIcon—Sets a font icon inside the close button of the tabs by using one of the predefined icons. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.
• closeSVGIcon—Sets an SVG icon inside the close button. For the full list of available icons, go to the list of font icons supported by Kendo UI for Angular.
• closeIconClass—Displays a custom icon from a CSS class. Using the closeIconClass is suitable for rendering FontAwesome or other third-party font icons.

Using Font Icons

To display a predefined font icon inside the close button of all tabs, use the list of font icons supported by Kendo UI for Angular and set the closeIcon property of the TabStrip component.

Copy Code<kendo-tabstrip closeIcon="delete">...</kendo-tabstrip>

To display an individual font icon for each tab, set the tab closeIcon property of the TabStripTab component.

Copy Code<kendo-tabstrip>
    <kendo-tabstrip-tab closeIcon="delete">...</kendo-tabstrip-tab>
    ...
</kendo-tabstrip>

The following example demonstrates how to set a font icon inside the tabs close button.

Using SVG Icons

To display an SVG icon inside the close button of the TabStrip tab:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to svg. For more information, go to the topic about icon settings.

2. Set the closeSVGIcon property of the TabStrip to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

   Copy Code<kendo-tabstrip [closeSVGIcon]="svgClose">...</kendo-tabstrip>

   Copy Codeimport { cancelCircleIcon, SVGIcon } from '@progress/kendo-svg-icons';
   public svgClose: SVGIcon = cancelCircleIcon;

3. (Optional) To display an individual SVG icon for each tab, set the closeSVGIcon property of the TabStripTab component.

   Copy Code<kendo-tabstrip>
       <kendo-tabstrip-tab [closeSVGIcon]="svgClose"></kendo-tabstrip-tab>
       ...
   </kendo-tabstrip>

The following example demonstrates how to set an SVG icon inside the close button of the tabs.

Using the Icon Class

To display an icon inside the close button of the tabs, you can also set the closeIconClass property to CSS classes. This approach is especially useful when you want to consume third-party icon libraries like FontAwesome.

Copy Code<kendo-tabstrip closeIconClass="fa fa-window-close"></kendo-tabstrip>

To display an individual icon for each tab, set the tab closeIconClass property of the TabStripTab component.

Copy Code<kendo-tabstrip>
    <kendo-tabstrip-tab closeIconClass="fa fa-window-close">...</kendo-tabstrip-tab>
    ...
</kendo-tabstrip>

The following example demonstrates how to display FontAwesome icons inside the tabs close button.

Suggested Links

• API Reference of the TabStrip
• API Reference of the TabStripTab