DxRibbonGroup.IconCssClass Property

Specifies the group icon’s CSS class.

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

When the ribbon width decreases, the component collapses groups and display them as drop-down buttons. Use Text and IconCssClass properties to define text and icon for the button.

Razor

<DxRibbon >
    <DxRibbonApplicationTab Text="File" />
        <DxRibbonTab Text="Home">
            <DxRibbonGroup Text="Clipboard" IconCssClass="rb-icon rb-icon-undo">...</DxRibbonGroup>
            <DxRibbonGroup Text="Font Settings">...</DxRibbonGroup>
            <DxRibbonGroup IconCssClass="rb-icon rb-icon-bold">...</DxRibbonGroup>
        </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-undo {
    -webkit-mask-image: url("../images/icons/ribbon/undo.svg");
    mask-image: url("../images/icons/ribbon/undo.svg");
}
.rb-icon-bold {
    -webkit-mask-image: url("../images/icons/ribbon/bold.svg");
    mask-image: url("../images/icons/ribbon/bold.svg");
}