DxRibbonApplicationTabItem.IconCssClass Property

Specifies the name of the CSS class applied to the item’s icon.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public string IconCssClass { get; set; }

Property Value

Type	Description
String	The CSS class name.

Remarks

Use the IconCssClass property to define an icon for the application tab item.

Razor

<DxRibbon>
    <DxRibbonApplicationTab Text="File">
        <DxRibbonApplicationTabItem Text="New" 
                                    IconCssClass="rb-icon rb-icon-document-blank" 
                                    Click="@(() => ClickItem("New tab item"))" />
        <DxRibbonApplicationTabItem Text="Open" 
                                    IconCssClass="rb-icon rb-icon-folder-open" 
                                    Click="@(() => ClickItem("Open tab item"))" />
        <DxRibbonApplicationTabItem Text="Save as" 
                                    IconCssClass="rb-icon rb-icon-save" 
                                    Click="@(() => ClickItem("Save as tab item"))">
            <DxRibbonApplicationTabItem Text="Text file" 
                                        Click="@(() => ClickItem("Text file tab item"))"/>
            <DxRibbonApplicationTabItem Text="Word document" 
                                        Click="@(() => ClickItem("Word document tab item"))"/>
            <DxRibbonApplicationTabItem Text="Pdf file" 
                                        Click="@(() => ClickItem("Pdf file tab item"))"/>
        </DxRibbonApplicationTabItem>
        <DxRibbonApplicationTabItem Text="Share" 
                                    IconCssClass="rb-icon rb-icon-share" 
                                    Click="@(() => ClickItem("Share tab item"))" />
        <DxRibbonApplicationTabItem Text="Print" 
                                    IconCssClass="rb-icon rb-icon-print" 
                                    Click="@(() => ClickItem("Print tab item"))" />
    </DxRibbonApplicationTab>
    <DxRibbonTab Text="Home">...</DxRibbonTab>
    <DxRibbonTab Text="Insert">...</DxRibbonTab>
</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-document-blank {
    -webkit-mask-image: url("../images/icons/ribbon/berry/document-blank.svg");
    mask-image: url("../images/icons/ribbon/berry/document-blank.svg");
}
.rb-icon-folder-open {
    -webkit-mask-image: url("../images/icons/ribbon/berry/folder-open.svg");
    mask-image: url("../images/icons/ribbon/berry/folder-open.svg");
}
.rb-icon-save {
    -webkit-mask-image: url("../images/icons/ribbon/berry/save.svg");
    mask-image: url("../images/icons/ribbon/berry/save.svg");
}
.rb-icon-print {
    -webkit-mask-image: url("../images/icons/ribbon/berry/print.svg");
    mask-image: url("../images/icons/ribbon/berry/print.svg");
}
.rb-icon-share {
    -webkit-mask-image: url("../images/icons/ribbon/berry/share.svg");
    mask-image: url("../images/icons/ribbon/berry/share.svg");
}

Run Demo