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?
- 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.