How to add custom icons in NavigationViewMenuItems in UWP

Question

I am trying to use NavigationView with custom icons as Menu Items in my UWP app. However, it seems NavigationView don't accept custom icons or BitmapIcon. The sample application I have seen in android is below;

Sample Code of NavigationView Menu Items

<NavigationView.MenuItems>
   <NavigationViewItem Name="SalahNavItem" Icon="CustomIcon" Content="Apps" Tag="Salah"/>
   <NavigationViewItem Name="AppsNavItem" Icon="CustomIcon1"  Content="Apps" Tag="apps"/>
</NavigationView.MenuItems>

What I am trying to achieve is to add custom Icon / Image in Menu Items, any clue about it in UWP?

Flann

Answer 1

You can add custom Icon Use

<NavigationView.MenuItems>
   <NavigationViewItem Name="SalahNavItem" Icon="CustomIcon" Content="Apps" Tag="Salah">
   <NavigationViewItem.Icon>
                <!-- Use Custom icon <FontIcon Glyph="&#xE10F;"/>
                     Or <BitmapIco UriSource="Path"/> -->
   </NavigationViewItem.Icon>
   <NavigationViewItem Name="AppsNavItem" Icon="CustomIcon1"  Content="Apps" Tag="apps"/>
</NavigationView.MenuItems>

See this link

Bigford

Great, Thank you, it works - why it shows .png files in black and white? – Flann

Icons are basically black and white in UWP. It is used like that because It will change accordingly to the dark and Light theme. In white theme it will be black and in dark it will be white. – Bigford

This code should work ` <NavigationViewItem Name="SalahNavItem" Tag="Salah"> <NavigationViewItem.Content><StackPanel Orientation="Horizontal"> <Image Source="Path" /> <TextBlock Text="App"/> </StackPanel></NavigationViewItem.Content></NavigationViewItem >` Since I don't have latest SDK i couldn't try it but it should work. – Bigford

Set show as monochrome for bitmap icon to see it in colour always – Jardine

Answer 2

Expanding a bit on the above answer:

<BitmapIcon UriSource="ms-appx:///Assets/globe.png"/>

https://learn.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.bitmapicon?view=winrt-22000

Marienthal

Does this answer add anything that is missing from the original answer? It looks like this question was answered years ago, and this answer doesn't seem to add anything to the discussion. The solution you propose is already documented in the original answer. – Sunny

Yes, it does add something. It adds the syntax necessary to for the asset path, which was not included in the answer above that I could see. It's possible that this is buried someplace in Xaml Controls Gallery codebase. Good luck in finding it. Regards. – Marienthal

Thanks for contributing. Since the question is about how to use a BitmapIcon in a NavigationView, and since your answer doesn't address that question but merely answers an un-askef question about the basics of using a BitmapIcon anywhere, it should be a comment instead. If someone comes to the post with the same question as the original, your answer is not helpful to them on it's own because it doesn't address the question. Your post wound up in the review queue, which is why I'm giving you this feedback. I appreciate your involvement, and I want to help you contribute. – Sunny

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. - From Review – Drawbridge