Add new icons to OpenUI5?

Question

We need to add new icons to OpenUI5. The icons are already defined as a vector-based font.

I know that it's possible to add the icons to the SAP standard font through a service like https://icomoon.io/. However, I want to have to be able to maintain them outside in a separate file (so that we do not need to do redo the task when a new OpenUI5 version comes).

Is it possible to define an additional font to use for icons?

Answer 1

As you already mentioned it's not a good idea to extend the UI5 font for future compatibility reasons. If you already have your own font you can easily register it with UI5 and reference it using a similar url-schema. Instead of sap-icon://funny-icon you could say sap-icon://dparnas-icon/funny-icon.

Here is a sample implementation:

jQuery.sap.require("sap.ui.core.IconPool");
jQuery.sap.require("sap.ui.thirdparty.URI");

(function() {
  var aIconNames = [ "funny-icon", "another-icon" ], // the icon names
    sCollectionName = "dparnas-icon", // the collection name used in the url-schema
    sFontFamily = "DarnasIcons", // the icon font family like defined in your css
    aIconContents = [ "E003", "E004" ]; // the unicode characters to find aIconNames under, same order

  // add the icons the your icon pool
  for (var i = 0; i < aIconNames.length && i < aIconContents.length; i++) {
    sap.ui.core.IconPool.addIcon(
      aIconNames[i], 
      sCollectionName, 
      sFontFamily, 
      aIconContents[i]
    );
  }
}());

Furthermore you will have to define the font-family in your CSS. That's it! It's easy but hard to find ;)