Skip to Content
Author's profile photo Nithyanandam Venu

Using custom icon font with SAP Design studio 1.6 icon component

With the recent SAP Design Studio 1.6 release, there are many new and interesting components in SAP Business Objects Design Studio. One component that really intrigued me was the icon component. In the previous versions of SAP Design Studio, we were able to add SAPUI5 font icons using a few work around methods but now these icons are available out-of-the-box.  So This is something that I thought was extremely useful, hence decided to explore more features of this component further to make it even more useful:)

How to include custom font?

I had to google and explore to know how a UI5 component works, since the icon component that’s available in SAP Design Studio 1.6  is built on the UI5 icon component. The URL mentioned below helped me understand the flow of the component to a great extent:

How it works?

When we declare a custom font File in the property sheet, it creates a font face with the file name as font family. We can reference  this with the collection icon name.


The required icon font file depends on the browser supported by your application. For Internet Explorer (IE) versions below IE9, the font files need the following extensions: .eotand .ttf. For other browser versions, only the .ttfextension is required.

How to implement custom font?

  1. First step is to obtain your custom font file. In my case, I have obtained fontawesome.ttf file from fontawesome website.


   2.Start Open SAP Design Studio and create a new application.

   3.Drag and drop the icon component into the application.


   4.In property sheet, look for the option custom font and click on it to open the file explorer. Direct it towards the custom font file you have (in my case,fontawesome ttf file). Once you point out the path, it will be uploaded to your repository.


   5.Now in order to reference the icon, you can follow either of the following two ways:

1) From property sheet

       By calling collection and reference name in ICON URI like this sap-icon://fontawesome-webfont/acute.where fontawesome-webfont is my collection name (file name) and acute is my icon name


2) From APS

     Select the tab custom font. It would be empty until you search your icon name in the search box (in my case for example arrow), then click on the option you want.


     I have used  the ttf file which supports IE9 plus version. When you run the application, you will be able to see the font awesome icon.


     We can switch between icons, background, color and shape using ztl function that makes this more dynamic to show alert driven data.

Since this icon component allows customization, our own company logo can even be easily incorporated into the SAP Design Studio instead of using the image component, which increases the server load. Icon component will be handy if we have lot of icons to be used in the dashboard.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      I would add the following to this awesome post:

      • after you upload your local downloaded font FontAwesome.otf (and not the ttf ) please click somewhere else on the application to exit the objects properties or additional properties and then access the Icon Object again.
      • then go to the Custom Font and you can see them all OR search them using the icon code (search "a" or "b" for example and you will see what I mean.






      Author's profile photo Nithyanandam Venu
      Nithyanandam Venu
      Blog Post Author

      Hi Bogdan,


      Nice addition and will be really helpful.




      Author's profile photo Tülay Karasu
      Tülay Karasu

      Thank you for information.