DxContextMenuItem.IconUrl Property

Specifies a menu item icon’s URL.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

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

Property Value

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

Remarks

The following code snippet assigns icons to context menu items using Icon Library APIs and dynamically displays a checkmark:

@using DevExpress.Images.Blazor

<DxContextMenu @ref="@ContextMenu"
               ItemClick="@OnItemClick">
    <Items>
        <DxContextMenuItem Text="Sort By"
                           IconUrl="@Icon.ArrowSort">
            <Items>
                <DxContextMenuItem Text="Name"
                                   IconUrl="@GetChecked("Name")" />
                <DxContextMenuItem Text="Size"
                                   IconUrl="@GetChecked("Size")" />
                <DxContextMenuItem Text="Type"
                                   IconUrl="@GetChecked("Type")" />
            </Items>
        </DxContextMenuItem>
        <DxContextMenuItem Text="Copy"
                           IconUrl="@Icon.Copy"
                           BeginGroup="true" />
        <DxContextMenuItem Text="Cut"
                           IconUrl="@Icon.Cut" />
        <DxContextMenuItem Text="Remove"
                           IconUrl="@Icon.CloseCircle" />
        <DxContextMenuItem Text="Select All"
                           BeginGroup="true" />
    </Items>
</DxContextMenu>

@code {
    DxContextMenu ContextMenu { get; set; }
    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) ? Icon.Checkmark : null;
    }
}

Refer to the Icons help topic for additional information about icons in DevExpress Blazor components.