Position custom c8y app icon

, ,
1

I want to use a custom app icon in my c8y standalone app (“@c8y/ngx-components”: “1019.23.8”) and reference this in cumulocity.config.json:

    icon: { url: 'url(./image/DM_App-Icon.svg)', class: 'custom-app-icon' }

The class ‘dlt-c8y-icon-custom-app-icon’ is defined as follows:

.dlt-c8y-icon-custom-app-icon {
	height: 48px !important;
	width: 96px !important;
	margin-left: 80px !important;
}

When I don’t use a custom class my icon is aligned on the lft border and not in the center of the navigator column.

But using the custom class results in the wrong position in the application switcher:

Screenshot 2024-05-23 at 18.27.02
Screenshot 2024-05-23 at 18.27.021526×1116 227 KB

How can I achieve that the custom icon is centred in both places: navigator and app switcher?

– Christof

2

Hi @Christof_Strack,

this is a known issue and a fix for this will be provided soon.
In the meantime you could apply this following style sheet to your app:

c8y-app-icon > i {
  width: auto !important;
  min-width: 36px;
  background-position: center;
}

Regards,
Tristan