Using custom icons/font in SAP Fiori launchpad

Question

I am searching for a way to use custom icon fonts already in the Fiori Launchpad.

I found one way using the UI theme designer: https://blogs.sap.com/2015/12/19/custom-icons-in-fiori-launchpad/. But as I understand these icons are only available with a custom theme.

I am searching a way to register my own font so that the icons are available similar as the Fiori launch icons.

Looks like they are stored here: /UI5/sap/ushell/themes/base/fonts/ and referenced by the default themes, like here: /UI5/sap/fiori/themes/sap_bluecrystal/library.css

@font-face {
  font-family: 'Fiori2';
  src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot");
  src: url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.eot?#iefix") format('embedded-opentype'), url("../../../../../UI5/sap/ushell/themes/base/fonts/sap-launch-icons.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

The icons are also available in the "Icon" selector of Fiori Launchpad Designer (FLPD) by name. So the questions are:

Is it possible to use own fonts similar to existing fonts?
If so, where and how should the font be placed?
If so, where and how should the icon names be defined, so that they can be used like this: "sap-icon://myNameSpace/iconname"?

I know already how to do it inside my own apps using sap/ui/core/IconPool (For reference: https://ui5.sap.com/#/topic/21ea0ea94614480d9a910b2e93431291). But how to do it in a standard theme inside the Fiori Launchpad / Fiori launchpad Designer?

I am searching for a general way to extend the available icons in all themes. Something like: Upload icon font into SAP system here, upload icon id/name-map here. Use it everywhere, also in standard Fiori Launchpad Configuration. — user3783327
Sounds like you have to modify the SDK for such a wide change. — Marc
I would expect it should be possible to extend this somehow? If you create some apps with own icons an plan to deliver it to other customers? But potentially it is not supported, but I don't know :-/ — user3783327
Then you have to add the new icons in each and every project (afaik) — Marc

Boghyon Hoffmann Boghyon Hoffmann · Accepted Answer · 2022-05-29T23:05:30

Fiori design guidelines explicitly warn not to use custom icons inside Fiori launchpad e.g. Tiles:

We have decided to stop unique launch icons being created for individual apps. Creating a unique icon for every app was and is not scalable in terms of iconography and production [...].

Projects without a SAP Fiori ID do not get an individual icon.

Do not develop your own icons or use custom icons.

As such, there is currently no public APIs or documented solutions to provide custom icons for FLP.

Update: found the Note 2411631 which says pretty much the same thing:

There is currently no officially supported method for adding custom icons to the Launchpad for use with tile creation.

As well as the statement by Thorsten Dencker:

Changing the Icon Font is officially not supported by the SAP Theme Designer.
[...] Issue coming up with custom CSS cannot be handled by the normal support process.

Using custom icons/font in SAP Fiori launchpad

1 Answers