No icons on top SfMenu items

[Paul G Mariotti]

Hello.

I am using SfMenu with three top-level SfMenuItems each of which has a number of sub-menus.

Icons on sunmenus work perfectly, but when I try to use icons as well as text on the top SfMenuItems no icon is shown.

Emample:

XML

<my:SfMenu x:Name="menu" Grid.Row="0" Background="#00000000" RequestedTheme="Light">

                        <my:SfMenuItem Header="Shape" Background="#00000000" Foreground="White">

                            <my:SfMenuItem.Icon>

                                <Image Source="/Resources/shapeIcon.png" />

                            </my:SfMenuItem.Icon>

                            <my:SfMenuItem Background="#00000000" Header="Grid">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/gridIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="List" FocusVisualPrimaryBrush="#00000000">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/listIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="Carousel">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/carouselIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="Accordion">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/accordionIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                        </my:SfMenuItem>

                        <my:SfMenuItem Header="Order by..." Background="#00000000" Foreground="White">

                            <my:SfMenuItem.Icon>

                                <Image Source="/Resources/contentIcon.png" />

                            </my:SfMenuItem.Icon>

                            <my:SfMenuItem Background="#00000000" Header="Alpha">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/alphaIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="Author">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/authorIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="Date">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/dateIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                        </my:SfMenuItem>

                        <my:SfMenuItem Header="Sort" Background="#00000000" Foreground="White">

                            <my:SfMenuItem.Icon>

                                <Image Source="/Resources/sortIcon.png" />

                            </my:SfMenuItem.Icon>

                            <my:SfMenuItem Background="#00000000" Header="Ascending">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/ascendingIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                            <my:SfMenuItem Background="#00000000" Header="Descending">

                                <my:SfMenuItem.Icon>

                                    <Image Source="/Resources/descendingIcon.png" />

                                </my:SfMenuItem.Icon>

                            </my:SfMenuItem>

                        </my:SfMenuItem>

                    </my:SfMenu>

With this Xml, I would expect the top menu items (Shape, Order BY and Sort to show the relative icons, but they do not appear.

What am I doing wrong?

[Elakkiya Muthukumarasamy]

Hi Paul, 

Greetings from Syncfusion. 

We have checked the reported query” No icons on top SfMenu items” and we would like to let you know that currently we don’t have direct support to achieve your requirement. We are checking the feasibility to add the icons on top of the SfMenu items and update you the further details on 14^th July 2021.We appreciate your patience until then. 

Regards, 

Elakkiya 

[Vijayalakshmi Roopkumar]

Hi Paul 

 

Thank you for your patience. 

  

In our sample, we have shown how to add the icons on top of the SFMenu items in MVVM pattern. Please refer the below sample and output screen for the same. 

  

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SFMenu57855989 

  

Output: 

 

  

 Please try this solution and let us know if it is helpful. 

 

Regards, 

Vijayalakshmi VR