SAPUI5 Icon Explorer for Design Studio

[former_member131154]

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.

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-katrinb 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