Skip to Content
Technical Articles
Author's profile photo Annika Ruff

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

 

Assigned tags

      15 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Matt Hawkins
      Matt Hawkins

      Annika,

      This is a very useful blog, thank you.

      For anyone not wanting to manage their own server, you can use https://pages.github.com/ as an alternative.

      Author's profile photo Ashutosh Rastogi
      Ashutosh Rastogi

      Very Useful blog, thanks for the info.

      -Ashutosh

      Author's profile photo Jef Baeyens
      Jef Baeyens

      Thanks for the info!

      Can't SAP include and update their own UI5 icon files automatically within SAC. It is a SAAS solution right?
      On the other hand, I wish I could upload our own CSS file & our fonts within the SAC instance itself.

      In production environments, why is a separate public server needed, as it introduces another risk/dependency.

      Author's profile photo Annika Ruff
      Annika Ruff
      Blog Post Author

      Hi Jef,

      we are currently discussing this with PM to make it easier in future.

      The functionality "add custom web font" was intended to allow companies to add their own font to SAC. In our blog we show a way how you can also use it to get Fiori Icons into SAC.

      Author's profile photo Jef Baeyens
      Jef Baeyens

      Great. Thanks for the feedback here! Looking forward to hear when SAP can make that happen, as we'd like to use this more easily in a production environment.

      Author's profile photo Martijn van Foeken
      Martijn van Foeken

      Hi Annika,

      Is there already an improvement request submitted to add the Fiori icons as custom web fonts by default in SAC?

      Kind regards,

      Martijn van Foeken | Interdobs

      Author's profile photo Jef Baeyens
      Jef Baeyens

      I guess not Martijn, can you create one?

      Author's profile photo Agata Janeczek
      Agata Janeczek

      Hello Annika, any updates on the topic. For some of us it's not easy to request a publicly available server + how is that about font licensing?

      Author's profile photo Gregor Majdic
      Gregor Majdic

      Hi Annika,

      Will this custom fonts also work on mobile application? I have some problems to visualize on mobile application (version 2.60.2)

      Kind regards,

      Gregor

      Author's profile photo Nathan Qi
      Nathan Qi

      I was trying to host this in a Tomcat and noticed Tomcat doesn't support mime type woff2 until some latest versions. But it's pretty easy to put fix into web.xml:

      https://bz.apache.org/bugzilla/show_bug.cgi?id=61047

      Author's profile photo Agata Janeczek
      Agata Janeczek

      Hello Nathan, do you have that Tomcat out of company network?

      Author's profile photo Aneeque Hassan
      Aneeque Hassan

      Works quite nice. Thanks alot for the blog

       

      Best regards,

      Aneeque

      Author's profile photo Ashish Farkya
      Ashish Farkya

      Works very well within a Story or an Analytical App; both.

       

      Thanks for sharing this. Very useful info.

       

      Thanks,
      Ashish

      Author's profile photo Yoav Yahav
      Yoav Yahav

      Annika Ruff Michael Graf  will this be applied to analytic designer as well?

       

       

       

      Author's profile photo Christoph Tillmann
      Christoph Tillmann

      Hi Yoav.

      This works with analytics designer as well.

      Regards
      Christoph