blazor-devexpress-dot-blazor-dot-dxcontextmenuitem-f590f339.md
Specifies a menu item icon’s URL.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
[DefaultValue(null)]
[Parameter]
public string IconUrl { get; set; }
| Type | Default | Description |
|---|---|---|
| String | null |
A menu item icon’s URL.
|
Use the IconUrl property to specify the path to a menu item’s icon. The specified image is wrapped with the `` tag when rendered. The resulting image is limited to 16px*16px.
You can use the IconUrl property to implement a dynamically visible check sign in the item.
<DxContextMenu ItemClick="@OnItemClick" >
<Items>
<DxContextMenuItem Text="Sort By" IconUrl="/images/sort.svg">
<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="/images/copy.svg" BeginGroup="true" />
<DxContextMenuItem Text="Cut" IconUrl="/images/cut.svg" />
<DxContextMenuItem Text="Remove" IconUrl="/images/clear.svg" />
<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) ? "/images/check.svg" : null;
}
}
See Also