Custom icons in Fiori Launchpad

[Former Member]

A customer has recently asked me to integrate their custom Font Type and home grown icon gallery not only in a set of custom made Fiori Applications but also into the standard SAP Fiori Launchpad. After investigating for a while and reading great posts like Fiori Icon logic by jerry.wang I reached following conclusions:

 

1. A custom Font Type can be exposed via url as mime object within a BSP



The Font Type will be accessible thru an url as following:

https://<host>.<domain>:<port>/ sap/bc/bsp/sap/<bsp_name>/<font_type.ttf>

 

2. Theme Designer allows referencing a custom Font via url using CSS font-face :

@font-face {
font-family: <FontType>;
src: url(https://<host>.<domain>:<port>/sap/bc/bsp/sap/<bsp_name>/<FontType.ttf>;);
}

 

See w3s documentation in https://www.w3schools.com/cssref/css3_pr_font-face_rule.asp.

 

3. When defining a Launchpad tile only SAP standard icons can be selected:

 





 

4. Each SAP icon has an icon code associated. For instance, sap-icon://course-book has E096 linked to it

 



The complete SAP icon list can be found in the Icon Explorer.

5. As Jerry explains in  Fiori Icon logic, SAP uses attribute data-sap-ui-icon-content which is filled by the IconRenderer, which itself brings icon name and icon code together. At that point, icon name course-book is linked to icon code E096.

If we check in the browser debugger, we can see the font family used is the standard “SAP-icons” and the icon name is “course-book”.



 

6. For my research I’ve taken few icons from the open Fontello collection and customized them to make them fit the UI5 icon codes and I’ve created a custom Font Type called “euro.ttf”.  So in my example, the Fontello icon-heart has been given icon code E096, which attached to course-book in Fiori.



You can find more information about Fontellon on http://fontello.com/

7. As we already know, we can define a custom font via CSS. That means we can link the icon code E096 to another custom icon when setting up our custom Font Type and reference it in the Theme Designer CSS tab.



So whenever the Launchpad pulls the configuration for our tile, font name “course-book” associated to icon code E096 will now fetch the icon-heart defined in our custom Font Type. Same happens with other icons I’ve also defined in the custom Font Type “euro.ttf”:



I hope this trick can help those willing to use custom fonts and custom icons in the SAP Fiori Launchpad. Your comments are highly welcome! 🙂