Skip to Content

SAPUI5 Icon Explorer for Design Studio

Hi Design Studio community,

a colleague of mine developed a simple to use application that help you adding SAPUI5 icons into your applications.

We’v called it “Icon Explorer”.

You might know the SAPUI5 Icon Explorer

Whenever you want to use one of these icons you have to think about the best way to implement it… here is the solution.

icon_explorer.JPG

Steps to install:

  • go to your Design Studio local repository and create a new folder
  • download the English or German version of the app as txt file to your folder and rename it to content.biapp
  • download the css file of the app and rename it to custom.css

Steps to use:

  • create a new app and link the custom.css file in in the application properties
  • add a text element to your application and assign the css class “icons” to it
  • execute the Icon Explorer App you have downloaded and execute it
  • select the icon you want and copy it with STRG + C
  • go to your text component and paste the icon into the text property with STRG + V

> Do not care about the content of the text property as long as you see the icon.

> Check the embedded help in the Icon Explorer App



What would you have to do without that approach?

If you like to use one of the icons in your application you would need to do the following steps for each of the icons:

    1. Go to SAP UI5 Icon Explorer page
    2. find and copy the ID for example “\e19b”
    3. create a css class in your css file with a syntax like:
      ICON_BOOKMARK:before {
      font-size: 22px;
      font-family: ‘SAP-icons’;             
      content: “\e19b”;          
      speak: none;
      color: #F4F6F6;
      }
    4. assign the newly created class to the component


You see that each icon you want to use would lead into an own class that has to be created manually so that your css file gets “crowded” and it would be a lot of manual work.


What is the benefit of the new approach?

  • You see all available icons on one page and not on many separate ones like in SAP UI5 Icon Explorer page
  • simple copy & paste into your app possible no manual css class creation needed
  • a single css class is sufficient for all icons
  • your css file stays clear and can be reused easily


Update:

Together with the two comments I received from Anne-Katrin Barthoff and Karol Kalisz (see below) you can use the css in combination with yours in 2 ways…

  • plain css

          ==> use “@import url(“custom.css”) within my own css-file

  • using sdk component

          ==> use the Design Studio SDK: Custom CSS Collector to dynamically attach more CSS files component



Hope you like that simple way of adding the icons.

If you need help using it or if I should share a video please let me know.

All the best

Dirk

9 Comments
You must be Logged on to comment or reply to a post.
  • Hi Dirk,

    you list as on of the benifits that your css file stays clear. But there is no way to use more than one css file in DS, is it? Custom.css AND my (clear) css-file.

    Thanks!

  • Hi Dirk, thanks for this, it is very useful – and thanks to your colleague who built this.

    Just one point for everyone who might be having the same problem: I am using the provided biapp in DS 1.4. There is a new property “Tooltip” that was added to standard components such as the Text component and corresponds to the html “title” attribute which displays a text when hovering over an element.

    Now if you don’t set a tooltip on a text component in DS1.4, the component’s text content is set as a tooltip. This strangely leads to a major performance problem when using your biapp with IE9 – the browser does not seem to like rendering all those Unicode Glyphs when the mouse hovers over the SAP_ICONS_LIST component.

    Long story short, the problem is solved by setting SAP_ICONS_LIST’s Tooltip property to any non-empty String.

    • Hi Christoph,

      thanks for your comment. I have not retested the app in 1.4…

      I will do the needed changes and upload new version within next week.

      Thanks

      Dirk

  • Hi,

    I assume that this is realy a basic question but I need to solve this problem.

    I’ve tried to use the UI5 Font in my DashBoard but I don’t see anything.

    Actually I can see that the browser does not find the font-family “SAP-icons”. We are useing BI 4.1. Do we have to install the font seperatly or do I have to install the font locally?

    Thx