1. Home
  2. Forum
  3. Blazor
  4. How to show iconCSS for material.css on TreeView Component - Blazor Server

How to show iconCSS for material.css on TreeView Component - Blazor Server

I grabbed a treeview sample from the documentation on how to make a sliding sidebar work in blazor.
My icons do not show.
Can you give me a clue as to why they don't show?
A screenprint and my css snippet is attached.

Here is what I have in the head section of the blazor _Host.cshtml:

    <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/material.css" rel="stylesheet" />
    <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.42/styles/material.css" rel="stylesheet" />

Here is my SF SideBar and SF Treeview embeded settings:

            <SfSidebar HtmlAttributes="@HtmlAttribute" Width="350px" Type="SidebarType.Push" Target=".main-content" @ref="Sidebar" @bind-IsOpen="SidebarToggle">
                <ChildContent>
                    <div class="main-menu">
                        <div class="table-content">
                            <input type="text" placeholder="Search..." class="search-icon">
                            <p class="main-menu-header">Dashboards Menu</p>
                        </div>
                        <div>
                            <SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">
                                <TreeViewFieldsSettings Id="nodeId" Text="nodeText" IconCss="iconCss" DataSource="treedata" HasChildren="hasChild" ParentID="pid" NavigateUrl="NavURL" Expanded="Expanded">
                                </TreeViewFieldsSettings>
                            </SfTreeView>
                        </div>
                    </div>
                </ChildContent>
            </SfSidebar>
Here is my TreeData object trying several way of setting the icon style :

    private List<TreeData> treedata = new List<TreeData>();
    protected override void OnInitialized()
    {

        base.OnInitialized();
        treedata.Add(new TreeData { nodeId = "01", nodeText = "VMEM Intellegence Desktop", iconCss = "icon-SendArrow icon", NavURL = "/EnrolledSKUS", Expanded = true });
        treedata.Add(new TreeData { nodeId = "01-01", nodeText = "Enrolled SKUs", iconCss = "SendArrow icon" ,pid = "01", NavURL = "/EnrolledSKUS"});
        treedata.Add(new TreeData { nodeId = "02", nodeText = "Radzen Outlink", iconCss = "icon-SendArrow", NavURL = "https://vmemx.callourapp.com" });
        treedata.Add(new TreeData { nodeId = "03", nodeText = "Future", iconCss = "icon-docs icon" });
        treedata.Add(new TreeData { nodeId = "04", nodeText = "Future", iconCss = "icon-th icon", hasChild = true, Expanded = true});
        treedata.Add(new TreeData { nodeId = "04-01", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "04-02", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "04-03", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "04-04", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "04-05", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "04-06", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "04" });
        treedata.Add(new TreeData { nodeId = "05", nodeText = "Future", iconCss = "icon-code icon", hasChild = true ,Expanded = true });
        treedata.Add(new TreeData { nodeId = "05-01", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "05-02", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "05-03", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "05-04", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "05-05", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "05-06", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" });
        treedata.Add(new TreeData { nodeId = "06", nodeText = "Future", iconCss = "icon-chrome icon"  });
        treedata.Add(new TreeData { nodeId = "07", nodeText = "Future", iconCss = "icon-up-hand icon" });
        treedata.Add(new TreeData { nodeId = "08", nodeText = "Future", iconCss = "icon-bookmark-empty icon" });
        treedata.Add(new TreeData { nodeId = "09", nodeText = "Future", iconCss = "icon-help-circled icon" });
        treedata.Add(new TreeData { nodeId = "10", nodeText = "Future", iconCss = "icon-doc-text icon" });
    }

Attachment: TreeView_Pic_and_CSS_9d54f762.rar

1 Reply 1 reply marked as answer
SM Shalini Maragathavel Syncfusion Team May 25, 2021 11:11 AM UTC

Hi Victor, 

Greetings from Syncfusion support. 
                                                                                                                                         
We checked your code snippet and found that you have not applied the css to the proper iconCss class, 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,  
  
<div id="wrapper" class="w-100"> 
        <SfSidebar HtmlAttributes="@HtmlAttribute">  
           <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> 
</div> 
@code { 
    private List<TreeData> treedata = new List<TreeData>(); 
    protected override void OnInitialized() 
    { 
        base.OnInitialized(); 
        treedata.Add(new TreeData { nodeId = "01", nodeText = "VMEM Intellegence Desktop", iconCss = "icon-SendArrow icon", NavURL = "/EnrolledSKUS", Expanded = true }); 
        treedata.Add(new TreeData { nodeId = "01-01", nodeText = "Enrolled SKUs", iconCss = "SendArrow icon", pid = "01", NavURL = "/EnrolledSKUS" }); 
        treedata.Add(new TreeData { nodeId = "03", nodeText = "Future", iconCss = "icon-docs icon" }); 
        treedata.Add(new TreeData { nodeId = "04", nodeText = "Future", iconCss = "icon-th icon", hasChild = true, Expanded = true });  
        treedata.Add(new TreeData { nodeId = "05-06", nodeText = "Future", iconCss = "icon-circle-thin icon", pid = "05" }); 
        treedata.Add(new TreeData { nodeId = "06", nodeText = "Future", iconCss = "icon-chrome icon" }); 
        treedata.Add(new TreeData { nodeId = "07", nodeText = "Future", iconCss = "icon-up-hand icon" }); 
        treedata.Add(new TreeData { nodeId = "08", nodeText = "Future", iconCss = "icon-bookmark-empty icon" }); 
        treedata.Add(new TreeData { nodeId = "09", nodeText = "Future", iconCss = "icon-help-circled icon" }); 
        treedata.Add(new TreeData { nodeId = "10", nodeText = "Future", iconCss = "icon-doc-text icon" }); 
 
    } 
    } 
} 
<style> 
    .e-treeview.main-treeview .icon-SendArrow::before { 
        content: '\e804'; 
    } 
    .e-treeview.main-treeview .SendArrow::before { 
        content: '\e810'; 
    } 
    .e-treeview.main-treeview .icon-docs::before { 
        content: '\e802'; 
    } 
    .e-treeview.main-treeview .icon-th::before { 
        content: '\e803'; 
    } 
    .e-treeview.main-treeview .icon-chrome::before { 
        content: '\e807'; 
    } 
    .e-treeview.main-treeview .icon-up-hand::before { 
        content: '\e810'; 
    } 
    .e-treeview.main-treeview .icon-bookmark-empty::before { 
        content: '\e811'; 
    } 
    .e-treeview.main-treeview .icon-help-circled::before { 
        content: '\e813'; 
    } 
    .e-treeview.main-treeview .icon-doc-text::before { 
        content: '\e812'; 
    } 
    .e-treeview.main-treeview .icon-circle-thin::before { 
        content: '\e808'; 
    } 
</style> 

We have prepared a sample based on your code snippet and attached in the following link. 
  
Please, refer to the below links for more information on TreeView component.  
  
  
Please get back to us, if you need further assistance. 
 
Regards,   
Shalini M. 


Marked as answer
Loader.
Up arrow icon