Skip to Content

What and why

Have you ever tried looking for appropriate icon in UI5 and found out that you couldn’t find one? UI5 comes with 546 different icons and a few hundred additional icons are available when using Fiori Launchpad. That is quite a few icons but you will eventually run into a use case where SAP provided icons does not have what you need. Or, it might be that your customer requires that the app uses specific icons.

When you have to start styling your app with custom icons, wouldn’t it be great if they worked exactly the same as icons in UI5? You could apply CSS styles, like color, to them or rotate and scale them easily. But it could be that all you have are PNG, JPG raster images or SVG vector images. With PNG and JPG you’re out of luck when it comes to CSS styling. SVGs can be styled but CSS styling may not work well with some UI5 controls like ObjectListItem.

Luckily you can convert your images into icon fonts easily with free tools. All you have to do is:

  1. Prepare SVG vector images
  2. Convert vector icons into icon font
  3. Register and use icon font icons in your app

With icon fonts you get these benefits over using individual images:

  • Consistent with UI5 icon fonts
  • Can be styled and animated
  • Smaller in size
  • Can be loaded in single HTTP Request

Next we will go through all the steps required to get your UI5 app styled with beautiful custom font icons.

Prepare vector images

Let’s say there is a requirement for an app for controlling kitchen equipment. SAP luckily provides an icon for a dishwasher but unfortunately fridge, oven and microwave oven are missing. Luckily there are many places to find free icons in the Internet and suitable icons are available in Pubzi [http://www.pubzi.com/].

source images.png

Unfortunately they are raster images so first they need to be converted into vector images. Inkscape is a free tool that can be used for conversion. Conversion is easy. First copy paste the images into Inkscape one at a time. In Inkscape images can then be converted into SVG format with a feature called Trace Bitmap. Then it’s just fitting the converted vector image into the document and possibly changing the document dimensions in Inkscape.

/wp-content/uploads/2015/11/tracebitmap_823003.png

document properties.png

Convert vector icons into icon font

Once vector images are ready, you can convert them into an icon font. IcoMoon App is a really good, free tool for that. Vector icons can be imported into IcoMoon App with a few clicks and all the icons can be converted into the font simultaneously. Then all you’ve to do is download the icon font, extract it and integrate it into your UI5 app.

fonts generated.png

A few words on icon fonts generated by IcoMoon App. They use Private Use Area (PUA) that is a range of code points in Unicode. Those code points won’t be used by Unicode Consortium but they could be occupied by other custom fonts. So test properly and assign different code point range for your font in IcoMoon App if there are any collisions.

Here are the important files that your downloaded icon font contains:

font files.png

In addition to these font files some lines of CSS are needed for integrating the newly created font icons. Luckily the downloaded package has these also in file style.css.

Use icon font in UI5 app

Using a custom icon font in your app is almost as simple as using icons that come with UI5. These are the steps required:

  1. Register the font and icons with CSS
  2. Add the font into UI5
  3. Use the icons

Same steps with example:

   1. Register the font and icons with css


@font-face {
  font-family: 'icomoon';
  src:url('icomoon.eot?5qvb9g');
  src:url('icomoon.eot?5qvb9g#iefix') format('embedded-opentype'),
  url('icomoon.ttf?5qvb9g') format('truetype'),
  url('icomoon.woff?5qvb9g') format('woff'),
  url('icomoon.svg?5qvb9g#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  }
  [class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  }
  .icon-microwave:before {
  content: "\e900";
  }
  .icon-oven:before {
  content: "\e901";
  }
  .icon-refridgerator:before {
  content: "\e902";
  }







   2. Add the font into UI5


// first parameter is font name, second parameter is collection name, third parameter is font-family and the last parameter is the code point in Unicode
sap.ui.core.IconPool.addIcon('microwave', 'customfont', 'icomoon', 'e900');
sap.ui.core.IconPool.addIcon('oven', 'customfont', 'icomoon', 'e901');
sap.ui.core.IconPool.addIcon('refridgerator', 'customfont', 'icomoon', 'e902');







   3. Use the icons



new sap.ui.core.Icon({
      src : "sap-icon://customfont/microwave"
}
//sap-icon://customfont/oven
//sap-icon://customfont/refridgerator








And that’s it. Now your app has custom icons that can be styled with CSS. Example:

/wp-content/uploads/2015/11/example_823053.png

Live example

Further reading

Good font icon set:

https://fortawesome.github.io/Font-Awesome/

Good tutorial on making an icon font:

http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/

To report this post you need to login first.

8 Comments

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

  1. Naseem VP

    Thanks for sharing. It was really informative.

    However i have a doubt, is there a way to maintain the custom icons centrally so that it can be accessed by all fiori apps?

    Regards,

    Naseem

    (0) 
    1. Kimmo Jokinen Post author

      Hi Naseem,

      Thanks for your feedback and question.

      You can maintain icons centrally by registering them in a library. Haven’t done this myself but you can look into the following links as a starting point:

      sapui5 – Adding a custom library as a dependency in SAP Fiori – Stack Overflow

      openui5/controllibraries.md at master · SAP/openui5 · GitHub

      How to create custom libraries – Ui5Strap Docs

      If you get it to work, the community would greatly appreciate your findings documented in an SCN blog. 😉

      Best regards,

      Kimmo

      (0) 
  2. Tom Cole

    Thanks for sharing, but I did have a question. I have created a Fiori Extension Application and wish to add a custom font icon to this extension. I followed all the steps above, but yet the icon does not appear.

    1. Created the Font (only one glyph named hazardous with \e900 code) and copied them to the webapp root of the extension application.

    2. In the index.html of the extension I added the CSS as above, the only difference was I used icon-hazardous as that was the name of the glyph.

    3. In the onInit function of the controller I placed the sap.ui.core.IconPool.addIcon(“hazardous”, “customicons”, “icomoon”, “e900”);

    4. In the view extension I referenced the new icon icon=”sap-icon://customicons/hazardous”

    Unfortunately the tab appears but with no icon. I am wondering if because it is an extension application the relative URL to the font is pointing to the original app url and not the extensions? Was hoping someone with Fiori experience might shed some light.

    (0) 

Leave a Reply