We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Using googleapi material icon inside IconCss

How would I use googleapi material icon inside IconCss in TreeView and MenuItem?


2 Replies

NI Nick November 28, 2022 02:40 PM UTC

Can I get an update on this?



SS Sivakumar ShunmugaSundaram Syncfusion Team December 9, 2022 05:04 PM UTC

Hi Nick,


Greetings from Syncfusion support.


To achieve your requirement, you need to use the Google icons in the TreeView node template as mentioned below. Also, include the mentioned style sheet in your _Layout.cshtml page.


Refer to the below code snippet.

[Index.razor]

 

<SfTreeView TValue="EmployeeDetails" CssClass="custom" FullRowSelect="true">

...

    <TreeViewTemplates TValue="EmployeeDetails">

        <NodeTemplate>

            @{

                    var employee = ((context as EmployeeDetails));

                        <div id="def">

                            <span class="ename">@((@context as EmployeeDetails).EmployeeName)</span>

                          <i class="material-icons">cloud</i>

                        </div>

                }             

            </NodeTemplate>

        </TreeViewTemplates>

        <TreeViewEvents TValue="EmployeeDetails"></TreeViewEvents>

    </SfTreeView>


[_Layout.cshtml]

 

<head>

    <meta charset="utf-8" />

...

<link rel="stylesheet" rel='nofollow' href=https://fonts.googleapis.com/icon?family=Material+Icons />

<script  src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script>

</head>


Sample:https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-76675239.zip


Check out the attached sample for your reference.


Loader.
Live Chat Icon For mobile
Up arrow icon