How to use icon css for treeview

[KINS]

I have an treeview control inside the sidebar.I would like to know how to use icon css for tree node

[KINS]

forgot to attach file

Attachment: IconCSS_9871aa5d.zip

Code:-

 <div>

                        <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">

                            <TreeViewEvents TValue="TreeData" NodeSelecting="TreeviewNodeSelecting"></TreeViewEvents>

                            <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid">

                            </TreeViewFieldsSettings>

                        </SfTreeView>

                    </div>

 private List<TreeData> treedata = new List<TreeData>();

    protected override void OnInitialized()

    {

        base.OnInitialized();

        treedata.Add(new TreeData { nodeId = "04", nodeText = "Order Management system", iconCss = "icon-th icon", hasChild = true });

        treedata.Add(new TreeData { nodeId = "04-01", nodeText = "Order Receiving", iconCss = "icon-circle-thin icon", hasChild=true, pid = "04" });

        treedata.Add(new TreeData { nodeId = "04-02", nodeText = "SRF", iconCss = "icon-circle-thin icon", pid = "04-01" });

        treedata.Add(new TreeData { nodeId = "04-03", nodeText = "Style Management", iconCss = "icon-circle-thin icon", pid = "04-01" });

        treedata.Add(new TreeData { nodeId = "04-04", nodeText = "Color Management", iconCss = "icon-circle-thin icon", pid = "04-01" });

        treedata.Add(new TreeData { nodeId = "04-05", nodeText = "Buyer Order", iconCss = "icon-circle-thin icon", pid = "04-01" });

        treedata.Add(new TreeData { nodeId = "04-06", nodeText = "Order Processing", iconCss = "icon-circle-thin icon", pid = "04" });

        treedata.Add(new TreeData { nodeId = "04-07", nodeText = "Factory Order", iconCss = "icon-circle-thin icon", pid = "04-06" });

    }

[Shalini Maragathavel]

Hi Ahmed, 

Greetings from Syncfusion support. 

                                                                                                                                         

We checked your code snippet and the shared screenshot. We suspect that you have not applied the css to the proper class(iconCss), which is the cause of the issue. To overcome the reported issue, we suggest you to set the content property to the proper class(iconCss) as demonstrated in the below code snippet,  

  <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand"  TValue="TreeData"> 

<TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" Expanded="Expanded" NavigateUrl="NavURL" ParentID="pid"> </TreeViewFieldsSettings> 

  </SfTreeView> 

@code { 

  protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        treedata.Add(new TreeData { nodeId = "04", nodeText = "Order Management system", iconCss = "icon-th icon", hasChild = true }); 

        treedata.Add(new TreeData { nodeId = "04-01", nodeText = "Order Receiving", iconCss = "icon-circle-thin icon", hasChild = true, pid = "04" }); 

        treedata.Add(new TreeData { nodeId = "04-02", nodeText = "SRF", iconCss = "icon-circle-thin icon", pid = "04-01" }); 

        treedata.Add(new TreeData { nodeId = "04-03", nodeText = "Style Management", iconCss = "icon-circle-thin icon", pid = "04-01" }); 

    } 

} 

<style> 

     

    .sidebar-treeview .main-treeview .icon { 

        font-family: 'fontello'; 

        font-size: 16px; 

        margin-top: -4px; 

    } 

    .e-treeview.main-treeview .icon-th::before { 

        content: '\e803'; 

    } 

    .e-treeview.main-treeview .icon-circle-thin::before { 

        content: '\e808'; 

    } 

We have prepared a sample based on your code snippet and attached in the following link. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treeview-icons536635258.zip 

Please, refer to the below links for more information on TreeView component.  

  

UG Documentation- https://blazor.syncfusion.com/documentation/treeview/getting-started/  

  

Demo link: https://blazor.syncfusion.com/demos/treeview/icons-and-images?theme=bootstrap4

If the issue persists, please replicate the reported issue in the above sample or provide us a simple sample to replicate the issue. So that we can check from our end and provide you the prompt solution. 

Regards,   

Shalini M.