DxTreeViewNode.IconUrl Property

Specifies the URL of the TreeView node’s icon.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v21.2.dll

Declaration

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

Property Value

Type Default Description
String

String.Empty

The URL of the TreeView node’s icon.

Remarks

Use the IconUrl property to specify the path to the TreeView node’s icon. The specified image is wrapped with the <img> tag when rendered. You can also specify the IconCssClass to apply the CSS class to the icon.

<style>
    .my-style {
        width: 15px;
    }
</style>

<DxTreeView>
    <Nodes>
        <DxTreeViewNode Name="Overview" 
                        Text="Overview" 
                        NavigateUrl="https://demos.devexpress.com/blazor/"
                        IconUrl="images/Info.svg"
                        IconCssClass="my-style" />
        <DxTreeViewNode Name="Editors" Text="Data Editors" Expanded="true">
            <Nodes>
                <DxTreeViewNode Text="Combobox" NavigateUrl="https://demos.devexpress.com/blazor/ComboBox" />
                <DxTreeViewNode Text="Spin Edit" NavigateUrl="https://demos.devexpress.com/blazor/SpinEdit" />
            </Nodes>
        </DxTreeViewNode>
        <DxTreeViewNode Name="FormLayout" Text="Form Layout" NavigateUrl="https://demos.devexpress.com/blazor/FormLayout" BadgeText="Upd" />
        <DxTreeViewNode Name="TreeView" Text="TreeView" NavigateUrl="https://demos.devexpress.com/blazor/TreeView" BadgeText="New" />
        <DxTreeViewNode Name="Tabs" Text="Tabs" NavigateUrl="https://demos.devexpress.com/blazor/Tabs" Visible="false" BadgeText="New" />
    </Nodes>
</DxTreeView>

Path to the TreeView Icon

See Also