Skip to Content

SAPUI5 - sap.tnt.NavigationListItem custom icons

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.

Add comment
10|10000 characters needed characters exceeded

  • 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

  • Get RSS Feed

5 Answers

  • Jan 09, 2017 at 08:22 AM

    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

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 09, 2017 at 10:11 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 09, 2017 at 01:40 PM

    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}"});
    Add comment
    10|10000 characters needed characters exceeded

  • Jan 11, 2017 at 12:19 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 12, 2017 at 01:07 PM

    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.

    Add comment
    10|10000 characters needed characters exceeded