DxRibbonApplicationTab.IconCssClass Property

Specifies the CSS class of an icon displayed in the application tab.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
String	null	The CSS class name.

Remarks

Use the IconCssClass or IconUrl property to specify settings of the icon displayed in the application tab.

Razor

<DxRibbon>
    <DxRibbonApplicationTab IconCssClass="rb-icon-home rb-icon" />
    <DxRibbonTab Text="Tab 1" />
    <DxRibbonTab Text="Tab 2" />
    <DxRibbonTab Text="Tab 3"/>
</DxRibbon>

CSS

.rb-icon {
    width: 1.25rem;
    height: 1.25rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
}
.rb-icon-home {
    -webkit-mask-image: url("../images/icons/ribbon/home.svg");
    mask-image: url("../images/icons/ribbon/home.svg");
}