DxTabBase.TabIconCssClass Property

Specifies the tab icon’s CSS class.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(null)]
[Parameter]
public string TabIconCssClass { get; set; }

Property Value

Type	Default	Description
String	null	A string that specifies the tab icon’s CSS class.

Remarks

Use the TabIconCssClass property to add an icon to a tab.

Razor

<DxTabs SizeMode="Params.SizeMode">
    <DxTab Text="Home" TabIconCssClass="tabs-icon-home tabs-icon"></DxTab>
    <DxTab Text="Products" TabIconCssClass="tabs-icon-products tabs-icon"></DxTab>
    <DxTab Text="Support" TabIconCssClass="tabs-icon-support tabs-icon"></DxTab>
</DxTabs>

CSS

.tabs-icon {
    width: var(--dxbl-icon-width);
    height: var(--dxbl-icon-height);
    min-width: var(--dxbl-icon-width);
    min-height: var(--dxbl-icon-height);
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}
.tabs-icon-home {
    mask-image: var(--dxbl-tabs-icon-home);
    -webkit-mask-image: var(--dxbl-tabs-icon-home);
}
.tabs-icon-support {
    mask-image: var(--dxbl-tabs-icon-support);
    -webkit-mask-image: var(--dxbl-tabs-icon-support);
}
.tabs-icon-products {
    mask-image: var(--dxbl-tabs-icon-products);
    -webkit-mask-image: var(--dxbl-tabs-icon-products);
}

Refer to Icons for additional information.

Run Demo: Tabs

Implements

TabIconCssClass