Skip to Content

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

To report this post you need to login first.

9 Comments

You must be Logged on to comment or reply to a post.

  1. Anne-Katrin Barthoff

    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!

    (0) 
    1. Dirk Mayrock Post author

      Hi,

      you are right, there is only one css file that you attach to an application.

      The css in this blog can be enriched with all the other css code you need of course so there is no need for another css. Of ocurse its quite a bit of code in it, but if you bring it to the end of your file its good to use.

      the one provided does not have an separate multi line code for each and every icon you want to use, that’s what I had in mind.

      Does that help to clarify?

      Dirk

      (0) 
  2. Christoph Wassermann

    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.

    (0) 
    1. Dirk Mayrock Post author

      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

      (0) 
  3. Christian Sass

    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

    (0) 

Leave a Reply