DxContextMenuItem.IconCssClass Property

Specifies a menu item icon’s CSS class.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
String	null	A menu item icon’s CSS class.

Remarks

DevExpress Blazor components support pre-defined icon sets (such as Iconic or Bootstrap-recommended libraries) and custom icon libraries. Refer to the following topic for more information: Icons.

You can use the IconCssClass property to implement a dynamically visible check sign in the item.

<DxContextMenu ItemClick="@OnItemClick" >
    <Items>
        <DxContextMenuItem Text="Sort By" IconCssClass="oi oi-sort-ascending">
            <Items>
                <DxContextMenuItem Text="Name" IconCssClass="@GetChecked("Name")" />
                <DxContextMenuItem Text="Size" IconCssClass="@GetChecked("Size")" />
                <DxContextMenuItem Text="Type" IconCssClass="@GetChecked("Type")" />
            </Items>
        </DxContextMenuItem>
        <DxContextMenuItem Text="Copy" IconCssClass="oi oi-action-undo" BeginGroup="true" />
        <DxContextMenuItem Text="Cut" IconCssClass="oi oi-action-redo" />
        <DxContextMenuItem Text="Select All" BeginGroup="true" />
    </Items>
</DxContextMenu>

@code {
    string SortBy { get; set; }

    void OnItemClick(ContextMenuItemClickEventArgs args) {
        if (args.ItemInfo.Text == "Name" || args.ItemInfo.Text == "Size" || args.ItemInfo.Text == "Type")
            SortBy = args.ItemInfo.Text;
    }
    string GetChecked(string ItemText) {
        return (ItemText == SortBy) ? "oi oi-check" : null;
    }
}

Run Demo: Context Menu