Skip to Content
Author's profile photo Jerry Wang

Fiori Icon logic

When you are creating a new button and assign an icon to it, there is no way for you to know exactly what does this “add” icon look like.

/wp-content/uploads/2015/06/clipboard1_734584.png

Even if you use the star symbol in launchpad designer, there is still no convenient way to find this add icon.

/wp-content/uploads/2015/06/clipboard2_734638.png

Since all icons are listed in F4 help, there is no filter there:

/wp-content/uploads/2015/06/clipboard3_734639.png

Instead we can use this useful tool to find the icon you need efficiently:

Currently there are 535 icons available.

/wp-content/uploads/2015/06/clipboard4_734640.png

We can easily find the icon we need by search button.

/wp-content/uploads/2015/06/clipboard5_734641.png

And in the right-bottom part of the page, there is an id “e000” displayed for icon “accidental-leave”. We will explain the meaning of this id in the end part of this blog.

/wp-content/uploads/2015/06/clipboard6_734642.png

How is icon rendered in Fiori

Originally I thought that the binary content of all icons are stored in the server side. And in the runtime when an icon is to be rendered, there is a conversion done, transferring the internal url like “sap-icon://XXX” to absolute path like “https://XXXX” which points to the icon stored in the server. However I am wrong.

/wp-content/uploads/2015/06/img_734648.png

             Figure: how the traditional image is displayed in Fiori

If you use the element inspection function in Chrome development tool, you will find the corresponding html element for image in the final html source code does not contain any attribute like src. Instead, it has an attribute defined by SAP which seems to have something to do with image content: data-sap-ui-icon-content.

/wp-content/uploads/2015/06/clipboard7_734643.png

The value of this attribute is filled by IconRenderer when the icon is to be displayed in UI. The variable oIconInfo.content stores the actual value.

/wp-content/uploads/2015/06/clipboard8_734644.png

Check the source code of this js file, where all the supported icons together with their icon name and icon code are hard coded.

/wp-content/uploads/2015/06/clipboard9_734645.png

/wp-content/uploads/2015/06/clipboard10_734646.png

/wp-content/uploads/2015/06/clipboard11_734647.png

So the icon id for icon “accidental-leave” we find in icon browser page, e000, is just its corresponding code hard coded in IconPool.js.

Assigned Tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Vijay Vegesana
      Vijay Vegesana

      Hi Jerry,

      Thanks for u r steps. what If I want to add custom Icon in F4 help, Please provide your thoughts.

      Thanks,

      Vijay

      Author's profile photo Former Member
      Former Member

      This is a great tutorial Jerry.  I didn't even know that the Icon Explorer listed and ended up making a print out of all the icons we could refer to.  My colleagues cheered today when I told them about the icon explorer.  Thanks!

      Author's profile photo Former Member
      Former Member

      Hi Jerry,

      Thanks for these steps. How can I add a custom icon, created by me, to this list of icons? I would like to use a custom icon on a Fiori launchpad tile

      Thanks,

      ramanpreet

      Author's profile photo Former Member
      Former Member

      Hello Ramanpreet, have you found a way to upload and use custom icons?

      We are trying to do the same.

      Author's profile photo Thangaraj Swaminathan
      Thangaraj Swaminathan

      Dear Experts,

      I need your great help to fix my icon issue which is not rendered in SAP ABAP Depository after deployment. My current deployment is 2 ways. First using built 'dist' via WebIDE full stack and uploading using report program /UI5/UI5_REPOSITORY_LOAD as user wanted to use IE instead of Chrome for certain reason. Find attached screen why funny button delete symbol during rendered.

      This code is generated when upload into SAP Abap.

      if(n){n.addEventDelegate({onAfterRendering:function e(){$("span[id*='-imgDel-img']").attr("data-sap-ui-icon-content","")}})}})}catch(e){console.error(e)}

       

      thanks in advance!

      Swami