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/].

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.

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.

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:

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:

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/