Skip to Content
Technical Articles

Using SAP Fiori Icons as a custom web font in SAP Analytics Cloud

Have you ever found yourself searching for icons to give your SAP Analytics Cloud stories more meaning or to create meaningful buttons in an analytic application?

If yes, then the functionality “add custom web fonts” released with version 2019-24 will help you to avoid uploading images and easily add any icon you need to your SAP Analytics Cloud story.

As part of the SAP Fiori design guidelines, SAP delivers an open source icon font with more than 600 business icons. The font is included in SAPUI5 and the icon explorer can be used to browse through all of them.

Basically, the SAP Fiori icons are just like any other font but with icons instead of characters. If you define SAP Fiori icons as custom web font you can start using every icon you like in a text field or as button instead of uploading images. You can also change the color and size of the icon in the same way you do it with normal text.

It does not only save you a lot of time it also helps you to improve your story performance as loading text is always faster than loading images.

Before we explain in more detail what you must to do as an SAP Analytics Cloud administrator or what you can tell your administrator to do to add a custom web font, we give you a preview on how the result looks like.

Or here another example with a button in an analytic application.

As soon as the SAP Fiori icon font is configured in your tenant, the only thing you need to do is searching in the UI5 icon explorer for a suitable icon then copy the icon and change the font to SAP Fiori icon font and it will be displayed as icon.

So, what do you have to do to get it working?

As an administrator in SAP Analytics Cloud you need to go to the administration tab and choose default appearance and then upload a new font. SAP Analytics Cloud expects a specific format to allow you to upload your custom font. We have provided a demo and instruction steps in a GitHub repository.

 

 

Annika is an analytics expert that passionately creates amazing dashboards in SAP Analytics Cloud for key customers at SAP Sports & Entertainment.
Michael is UI and cloud development expert at SAP Sports & Entertainment – His passion is developing awesome looking UIs, and working with modern web technologies. He also loves getting in touch with the community and evangelizing technology. Follow him here or on @Twitter

 

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