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

[former_member250277]

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

 

[MattHawkins]

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.

[ashutosh_rastogi]

Very Useful blog, thanks for the info.

-Ashutosh

[JefB]

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.

[former_member250277]

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.

[JefB]

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.

[mfoeken]

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

[GregM]

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

[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

[JefB]

I guess not Martijn, can you create one?

[aneeque_hassan2]

Works quite nice. Thanks alot for the blog

 

Best regards,

Aneeque

[Ashish_Farkya]

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

 

Thanks for sharing this. Very useful info.

 

Thanks,
Ashish

[Agata]

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?

[Agata]

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

[former_member1161]

annika.ruff michael.graf  will this be applied to analytic designer as well?

[christophtill]

Hi Yoav.

This works with analytics designer as well.

Regards
Christoph

[michael_graf]

Important Update:

Instead of using my demo GitHub or your own repository to host the font definition files, please use  the official UI5 CDN instead. While hosting the font file yourself will still work, meanwhile there is a much simpler and standardized way using the official UI5 CDN.

The font definition file is included in the UI5 shipment and can be linked directley from the SAC settings. Please use this URL to link the font:
https://ui5.sap.com/resources/sap/ui/core/themes/base/SAP-icons.css

Enjoy!

Michael

[JefB]

Hi Michael, great that makes it super simple to setup.
But is it recommended (by SAP) to use that on production SAC environments?
If so, what are the guarantees this will not (ever) break?

[michael_graf]

Hi Jef, the UI5 CDN is officially supported by SAP and the font definition file was added for this use case. In the unlikely event this will (ever) break, you can open an OpenUI5 issue or an SAP support ticket.

[leapfrogger]

A wonderful article! Thanks!

Best regards,

Pavel

[jonas_neurath]

Dear all,

we have discovered that not all icons are working for the new story. Does anyone have an idea, why some of the icons work and some not?

Thanks for your response.

Best, Jonas