1. Home
  2. Forum
  3. Blazor
  4. Using googleapi material icon inside IconCss

Using googleapi material icon inside IconCss

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


4 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.


BO Bogdan July 8, 2024 06:54 PM UTC

Hi


I don't think this exactly answers the question.


In my application I use the ContextMenu control.

Question

How to place an icon with material icons from Google in the MenuItem element, specifically as IconCss?


Bogdan


KV Keerthikaran Venkatachalam Syncfusion Team July 9, 2024 12:57 PM UTC

Hi Bogdan,


We have checked the reported query and to use Google Material icons in the Context Menu component. Please refer to the code snippets and samples provided below.

<div id="target">Right click/Touch hold to open the ContextMenu </div>

<SfContextMenu Target="#target" TValue="MenuItem">

    <MenuItems>

        <MenuItem Text="Home" IconCss="material-icons home"></MenuItem>

        <MenuItem Text="Contacts" IconCss="material-icons contacts"></MenuItem>

        <MenuItem Text="Settings" IconCss="material-icons settings"></MenuItem>

    </MenuItems>

</SfContextMenu>

 

<style>

    .home::before {

        content: "home";

    }

 

    .contacts::before {

        content: "contacts";

    }

 

    .settings::before {

        content: "settings";

    }

    .e-contextmenu-container ul .e-menu-item .e-menu-icon {

        margin-bottom: 3px;

    }

    #target {

        border: 1px dashed;

        height: 150px;

        padding: 10px;

        position: relative;

        text-align: justify;

        color: gray;

        user-select: none;

    }

</style>


Please let us know if you need any further assistance on this.


Regards,

KeerthiKaran K V



Attachment: BlazorApp_c750c7.zip

Loader.
Up arrow icon