Custom Icons in Fiori Elements Component used in SAPUI5 Freestyle app

[gregorw]

Hello SAPUI5 / Fiori Elements Experts,

I'm helping to create a SAPUI5 Freestyle app that also includes some parts as Fiori Elements Components. The customer want to have it's own Icons not only be used in the Freestyle part, but also needs to replace the Icons of the Fiori Elements Components. So for example the sap-icon://action-settings:

Should be replaced by their custom one:

Based on the Blog Post Enhance UI5 app with custom icon fonts by kimmo.jokinen I'm aware how to do this in the Freestyle Part. But how would I get custom icons in the Fiori Elements?

Best Regards
Gregor

[WouterLemaire]

Hi Gregor,

The default icons of buttons in fiori elements are coming from the smart table control:

One way could be to extend the SmartTable control and override this function. This would also mean you have to extend the generic component of Fiori Elements to use your own SmartTable control which might be a bit too much.

Another way could be to change the icon of (in this case) the personalisation button from your Fiori Elements extension controller in the onBeforeRendering function:

onBeforeRendering: function () {
    this.getView().byId(this.byId("listReport").getId() + "-btnPersonalisation").setIcon("sap-icon://edit");
},

The result will look like this:

This means you'll have to do this for every Fiori Elements component/app and every icon you want to change. You'll also need to find all id's of icons or buttons where you need to change this.

Maybe this can also be changed using the theme designer but I'm not sure about that.

Hope it helps.

Gr, Wouter

[daniel_ruiz2]

hi Gregor,

I think it would be best for you to create a .CSS file you load in your manifest.json of a custom app and that can be easily transferred/applied to a number of applications and override each style directly with a id-endsWith clause(for this particular case), and you intercept what you want on a case by case basis. They may use a common entry point, for instance Fiori Launchpad, you can create a Fiori Launchpad Plugin that loads the custom CSS into the shell directly, meaning even standard applications would also get this modification without you going in "one-by-one", which wouldn't even be considered a viable solution. Let me know if you have issues implementing it.

ie. I've manually added a new style but this is kind of what you need in your custom CSS to modify the icon content itself.. I'm positive you also need a combination (without the ::before) where you switch the family to your custom font family name. (which may also be already declared in this same CSS file)

span[id$="-btnPersonalisation-img"]::before {
  content: "\e001" !important;
}

While you'd need a little more work, which is to create a custom launchpad plugin with manifest.json resources section, where you embed your custom CSS, and then create the target mapping into a Catalogue that also needs to be assigned to a role, this would still be a very clean way of doing it - you can always disable everything whenever you want and you risk zero runtime issues in later ui5 possible upgrades - worst case scenario, your CSS may not work entirely or just cause a visual issue which can be easily spotted.