SAPUI5 - sap.tnt.NavigationListItem custom icons

[former_member286225]

Hello Experts,

I am using sap.tnt.SideNavigation and I am trying to set my own icons to each of the items.

The icons are not displayed.

While searching for information on this problem, I saw that there was an open bug for this which was resolved on version 1.36.11.

I use version 1.40.11

Any ideas?

Regards.

[lucam_shamat]

Hi,

I had your same issue and after a shamingly long investigation I landed on this blog post: Enhance UI5 app with custom icon fonts.

The trouble is that NavigationsListItem's DO NOT accept "normal" pictures as icons, doesn't matter which URI you use. If you like to use a custom icon, THEN you need to create a custom icon FONT first.

Hope it helps,

Luca

[former_member286225]

An update...

I was able finally to display my custom icons.

The thing is: The icons are displaying in the upper level NavigationListItem but not in the internal ones.

I will keep investigating.

[former_member286225]

So...

After doing some more reading I realized that using "raw" .png images is not possible here.

I converted the .png images to .svc &-> font. I tried to load the image and I get a rectangle.

Now I am trying to see whether I can use color icons (defined with multiple paths).

Any thoughts will be appreciated.

Regards.

[former_member286225]

Hi Viplove,

Thanks for your suggestion. Unfortunately, it did not solve the problem.

I also tried: "img>nav_desktop_logoff" & "img>/nav_desktop_logoff" without success.

I know the image reference is correct becuase I am using it with menu button:

new sap.m.MenuButton({height:"50px", tooltip:"{i18n>nav.Desktop}", icon:"{img>/nav_desktop}"});

[former_member286225]

Hi Viplove,

Thank you for your feedback.

My code (snippet) is:

...
oSideNavigation.getFixedItem().addItem(new sap.tnt.NavigationListItem({ tooltip: "{i18n>nav.Desktop.LogOff}", icon: "{img>/nav_desktop_logoff}", select: function(){ oController.doDesktopLogOff(); } }));

...

Regards.

[former_member340030]

Hi Effi,

Can you remove "/" from the icon: "{img>/nav_desktop_logoff}"

replace icon: "{img>/nav_desktop_logoff}" with icon: "{img>nav_desktop_logoff}"

thanks

Viplove

[former_member340030]

Hi Effi

I am also using navigationList Item with custom icons in one of the project and its working correctly for me . Please check your code might be you have missed something

thanks

Viplove