Usage of Fiori & Business Suite icons in SAPUI5 Application

Dear Readers,

In this post I am going to write about how to use Fiori and business suite icons in a simple standalone SAPUI5 application.

In the SAPUI5 DemoKit, when we go to tools and then to Icon Explorer, we get the below screen.

There are basically three options:

• SAP Icons
• SAP Fiori Tools (Fiori Icons)
• SAP Business Suite (Business Suite Icons)

These three libraries contains a huge library of icons that we can use in our UI5/Fiori applications. Before, getting started, let’s take a look at the choice of icons provided by each of the above libraries.

SAP Icons:

It uses the library “sap-icon”. They are readily available in the UI5 library and can be used directly in our UI5 applications.

SAP Fiori Tools Icons:

It uses the sap-icon://SAP-icons-TNT library.

SAP Business Suite Icons:

It uses the sap-icon://BusinessSuiteInAppSymbols library.

Now, we are going to see how to make use of these icons in our SAPUI5 application. Firstly, create an empty SAPUI5 application (any tool such as WebIDE, Eclipse or Visual Studio can be used). Create a view and a controller.

In this application, to demonstrate the usage, we will make use of a button and the icon property of the button.

Go to the view of the application and add the following code:

<VBox>
    <Text text="SAPUI5 Icons"/>
</VBox>
<Button icon="sap-icon://action-settings" text="Settings"/>
<Button icon="sap-icon://comment" text="Comment"/>
<Button icon="sap-icon://database" text="Database"/>

Now, run the index.html file. The output will be as below:

Here we can see that what icons we have added from the library of SAP Icons, they are displayed directly in the buttons.

Further, now add the following code to the view to get the SAP Fiori Icons and SAP Business Suite Icons.

<VBox>
  <Text text="Fiori Icons"/>
</VBox>
<Button text="Code1" icon="sap-icon://SAP-icons-TNT/code1"/>
<Button text="Service Task" icon="sap-icon://SAP-icons-TNT/service-task"/>
<Button text="Raise Fault" icon="sap-icon://SAP-icons-TNT/raise-fault"/>
<VBox>
  <Text text="Business Suite Icons"/>
</VBox>
<Button text="Truck Load" icon="sap-icon://BusinessSuiteInAppSymbols/icon-truck-load-unload"/>
<Button text="Road" icon="sap-icon://BusinessSuiteInAppSymbols/icon-road"/>
<Button text="Box Truck" icon="sap-icon://BusinessSuiteInAppSymbols/icon-box-truck"/>

Now save the view and run the application. The output should be similar to the below image:

Here, as we can see, that the buttons and their respective texts have loaded, but the icons haven’t loaded. This happens only in the case of Fiori and Business Suite icons. The SAP icons have loaded properly.

This issue happens because unlike SAP icons, the libraries used by Fiori Icons and Business Suite icons are different and, requires to be loaded & initialized separately.

To fix this problem, we can follow the below steps:

• Initialize the font family and URI (It can be done in the oninit of the controller or inside the component file):
  • Fiori Icons:
    • Font Family: SAP-icons-TNT
    • URI: sap/tnt/themes/base/fonts/
  • SAP Business Suite Icons:
    • Font Family: BusinessSuiteInAppSymbols
    • URI: sap/ushell/themes/base/fonts/
• Register the above fonts to the Icon Pool (sap/ui/core/IconPool)
• In the view access the icons using the specified name spaces.

As mentioned above, steps 1 and 2 can be done either in the Component.js file or in the controller file, depending upon the requirement of the application and placement of the icons. In this case, we shall place the code in the controller itself.

So, in our controller we can place the below code (in the onInit function).

onInit: function () {
			var b = [];
			var c = {};
			//Fiori Theme font family and URI
			var t = {
				fontFamily: "SAP-icons-TNT",
				fontURI: sap.ui.require.toUrl("sap/tnt/themes/base/fonts/")
			};
			//Registering to the icon pool
			IconPool.registerFont(t);
			b.push(IconPool.fontLoaded("SAP-icons-TNT"));
			c["SAP-icons-TNT"] = t;
			//SAP Business Suite Theme font family and URI
			var B = {
				fontFamily: "BusinessSuiteInAppSymbols",
				fontURI: sap.ui.require.toUrl("sap/ushell/themes/base/fonts/")
			};
			//Registering to the icon pool
			IconPool.registerFont(B);
			b.push(IconPool.fontLoaded("BusinessSuiteInAppSymbols"));
			c["BusinessSuiteInAppSymbols"] = B;
		}

Finally our controller (after adding the dependencies), should look like this:

Now, save the file and refresh the application. We get the below screen:

Here we can see now that, now the Fiori and the Business Suite icons have loaded as well.

Note:

Depending upon the version of SAPUI5 loaded in the system, the above process might be unnecessary. In case the application is using a higher version of SAPUI5, 1.75.0 or above, and the application is run using the Component.js i.e. from the Fiori Launchpad, the Business Suite and Fiori icons may appear without adding any extra code in the controller.

For more details about this concept, kindly go through the below links:

https://sapui5.hana.ondemand.com/sdk/#/topic/21ea0ea94614480d9a910b2e93431291

https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#

Addition of Thrid Party/ Custom Icons in SAPUI5 – https://blogs.sap.com/2015/11/02/enhance-ui5-app-with-custom-icon-fonts/

Please feel free to ask any doubts/question in comments.