HOW TO – Use SAP UI5 Icons in SAC-Stories and SAC-Applications
Challenge
Icons are immensely helpful when designing SAP Analytic Cloud Stories and/or Applications. It helps to give a consistent view on navigation elements. There are multiple ways of creating Icons for instance via uploading of images.
This blog gives a “best practice” of having a consistent look and feel using the same icon library in SAP Analytics Stories but also Applications.
Objective
The objective of the approach is to show a consistent and flexible way of integrating Icons on Buttons and Elements in SAP Analytics Could Stories and Applications.
Process
1. Add UI5 Link to your SAC Tenant
From the side navigation go to the administration and choose “Default Appearance” tab
Add this CDN Link to Fonts and save it.
https://ui5.sap.com/resources/sap/ui/core/themes/base/SAP-icons.css
2. Go to the SAPUI5 Icons official website and choose the icon you want to add
This is the link for the SAPUI5 Icon Lists
In this example we want to add the activate icon in my sac story / application designer.
Click the clipboard button in the second row -> activate (Symbol)
3. Create an application designer app
After you copy the icon, you can create a dashboard and add a button.
In the styling panel paste your copied UI5 icon to the text field.
You will think you did something wrong because it is just a [] but it is all correct.
4. Change the Font to SAP-Icon
Please change the font to the SAP-icons in the styling panel.
This SAP-icons appears because we added the font in step 1.
And you should see the SAP UI5 icon within your SAC dashboard.
5. Create SAC story with the same icon.
After you created SAC story you can insert the text element, paste the copied UI5 icon in the box.
It will also be showing a bracket [] like this.
6. Go to the styling panel and change the font to sap-icons.
You can also change the size and color.
You should see the same Icon as in the Application Design dashboard.
