Using Custom Font/Icons in OpenUI5

[marianfoo]

Issue Description

I use the Timeline with OpenUI5 1.104.0 I would like to use the custom icons as with other controls on TimelineItem. Is this also possible with the webcomponents?

Timeline Usage in View

https://github.com/ui5-community/bestofui5-website/blob/main/src/view/Timeline.view.xml

IconPool Registration of font-awesome

https://github.com/ui5-community/bestofui5-website/blob/6a3216b65358ae68590c3e54a40b4e6e597be407/src/Component.ts#L39-L44

Usage of custom icon in Icon Control

https://github.com/ui5-community/bestofui5-website/blob/6a3216b65358ae68590c3e54a40b4e6e597be407/src/view/Object.view.xml#L32

Try the same with TimelineItem

<TimelineItem
        icon="sap-icon://font-awesome-icons/github"
        titleText="{versions>version}"

Issue Type

• [ ] Documentation is unclear
• [ ] Documentation is incorrect
• [X] Documentation is missing
• [ ] Other

[wridgeu]

Hey @marianfoo

I just wanted to put my 2 cents here, take it with a grain of salt though as I couldn't test it out myself yet and didn't have this case yet either.

It might work like mentioned in the 3rd point of the i18n example by registering a custom loader and the icons themselves.

Examples from webc src code:

• Icons-static.js
• Icons.js

I'll be looking forward to a more official answer that won't require you to fiddle around yourself and might be completely different anyway. :P

BR :)

[marianfoo]

Hey @wridgeu, I had also seen the js files and also thought that you can possibly use. I have tried it again and it has worked. I could probably something like this in using a Custom Fonts, but this would not work in a FLP.

see this commit for the changes below

onInit at Controller

const loadIconsBundle = async (collection ) => {
  let iconData = null;
  iconData = (await new Promise(function (resolve, reject) { sap.ui.require(['org/openui5/bestofui5/resources/font-awesome/fa-brands-sap'], resolve, reject) })).default;
  return iconData;
};
registerIconLoader("font-awesome-icons", loadIconsBundle);

local fa-brands-sap.js

Similar to SAP-icons.js

sap.ui.define(['exports'], function (exports) { 'use strict';

	var SAPIcons = {
		collection: "font-awesome-icons",
		packageName: "@ui5/font-awesome-icons",
		version: "v1",
		data: {
			"gamepad": {
				path: "M448 64H192C85.96 64 0 149.1 0 256s85.96 192 192 192h256c106 0 192-85.96 192-192S554 64 448 64zM247.1 280h-32v32c0 13.2-10.78 24-23.98 24c-13.2 0-24.02-10.8-24.02-24v-32L136 279.1C122.8 279.1 111.1 269.2 111.1 256c0-13.2 10.85-24.01 24.05-24.01L167.1 232v-32c0-13.2 10.82-24 24.02-24c13.2 0 23.98 10.8 23.98 24v32h32c13.2 0 24.02 10.8 24.02 24C271.1 269.2 261.2 280 247.1 280zM431.1 344c-22.12 0-39.1-17.87-39.1-39.1s17.87-40 39.1-40s39.1 17.88 39.1 40S454.1 344 431.1 344zM495.1 248c-22.12 0-39.1-17.87-39.1-39.1s17.87-40 39.1-40c22.12 0 39.1 17.88 39.1 40S518.1 248 495.1 248z"
			},
            "server": {
                path: "M480 160H32c-17.673 0-32-14.327-32-32V64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm112 248H32c-17.673 0-32-14.327-32-32v-64c0-17.673 14.327-32 32-32h448c17.673 0 32 14.327 32 32v64c0 17.673-14.327 32-32 32zm-48-88c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm-64 0c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24z"
            }
		}
	};

	exports.default = SAPIcons;

});

XML View TimelineItem

<TimelineItem
        titleText="{versions>version}"
        name="{versions>name}"
        icon="sap-icon://font-awesome-icons/server"

Screenshot

[wridgeu]

I could probably something like this in using a Custom Fonts, but this would not work in a FLP.

You're right. No possibility to use the Index.html there. Although there are most likely workarounds for that as well (suggestions could maybe be mentioned in the docs). And as boui5 isn't runnin within a FLP anyway that's fine for now :D

I have tried it again and it has worked.

Nice! 🎉 If that is the "correct" usage, then this should probably be mentioned in the docs, hence this issue, anyway. 😁

[ilhan007]

Hello @marianfoo @wridgeu there is so much of OpenUI5/SAPUI5 code so I am a bit confused. Is this a request for an API to register custom icon collection in UI5 Web Components, that can be used as all regular icons in all components' API, for example:

<ui5-icon name="font-awesome-icons/server" >
<ui5-button icon="font-awesome-icons/server">
<ui5-li icon="font-awesome-icons/server"
.....

Currently, this is not possible, but we can register this as a feature request.

BR, ilhan

[marianfoo]

Is this a request for an API to register custom icon collection in UI5 Web Components, that can be used as all regular icons in all components' API? Currently, this is not possible, but we can register this as a feature request.

Yes exactly, that would be great.

My workaround is currently to take your registerIconLoader from sap/ui/webc/common/thirdparty/base/AssetRegistry and load an icon similar to the file SAP-icons.js (my file looks like this) Then i can use it like this: icon="sap-icon://font-awesome-icons/server"

Thank you for your effort!

[marianfoo]

Just saw that there is already an issue about it. My feature wish would be that this can also be used in UI5. https://github.com/SAP/ui5-webcomponents/issues/5347 Don't know how far the two issues overlap here

[ilhan007]

Hello @marianfoo FYI in UI5 Web Components, we now support (merged in the main branch, will come with 1.8.0) registering completely custom SVGs with this PR https://github.com/SAP/ui5-webcomponents/pull/5865 addressing the request https://github.com/SAP/ui5-webcomponents/issues/5347 described in the custom-svg-icons section.

[ilhan007]

Hello @marianfoo

in UI5 Web Components project, you can either register entire custom collection via registerIconLoader :

import {registerIconLoader } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
registerIconLoader("my-custom-icons", () => {
    return {
        "collection": "my-custom-icons",
        "data": {
            "mark": {
                paths: [
                    `M514...`,
                ]
            }
        }
    }
});

or a single icon via registerIcon and providing a lit template:

import { registerIcon } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
import iconBakeryDiningTemplate from "./dist/generated/templates/BakeryDiningTemplate.lit.js";

// create the icon data for registration
const iconBakeryDining = {
    customTemplate: iconBakeryDiningTemplate,
    viewBox: "0 0 24 24",
    collection: "custom",
}

// register the icon
registerIcon("bakery-dining", iconBakeryDining);

For our project, this issue is resolved, unless you have other expectations.

As I have read, you would like to see similar capabilities in OpenUI5, if this is still the case and I suggest opening an issue in OpenUI5 as other colleagues are responsible and will take care.

Best Regards, ilhan