Company icon not displaying in App Switcher or app header

[luclib (Lucas Liberman)]

I am trying to display company icons for my cumulocity applications which are currently missing from both the App Switcher and the header panel.

So far, I have tried adding a .svg icon that I found online into my assets folder.

I then linked the file under the “icon” property in my package.json file and modified my copy command to copy of the content in my assets folder.

  "c8y": {
    "application": {
      [ . . . ]
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "brandingEntry": "./branding/branding.less",
      "hidePowered": true,
      "hideNavigator": true,
      "icon": {
        "url": "url(/apps/[app-name]/assets/images/[folder]/[name]_icon.svg)"
      },
      "copy": [
        {
          "from": "./assets/",
          "to": "assets"
        }
      ]
    },
    "cli": {}
  },

The icon itself is 1687 x 1246 pixels, but I am not sure if this is supposed to be the issue as, from what I understand, .svg files are supposed to scale with the container they are in.

[Pawel_Rynarzewski1 (Paweł Rynarzewski)]

Hi Lucas, do you see any errors in the Network tab? What URL does it try to reach? Have you tried with /apps/[app-name]/assets/images/[folder]/[name]_icon.svg (no url(...)) or with full absolute URL? If you access /apps/[app-name]/assets/images/[folder]/[name]_icon.svg directly, does it display the icon?

[luclib (Lucas Liberman)]

Hi Pawel,

I looked at the Network tab and it confirmed that the application could not find my icon.

I tried removing the url() method and then replaced it with the full absolute path and both returned the same result.

By accessing the icon directly, do you mean via VS code? Because it previews the icon just fine on VS code.

[Tristan_Bastian]

Hi Lucas,

if you perform a build of your application, can you check if the assets folder is included in the build? You can find the output of the build in the dist/<app-name>/ folder. Please confirm that the assets folder and the /assets/images/[folder]/[name]_icon.svg file are present there.

In case they are missing, you might need to adjust your Webpack copy plugin configuration. For support with that we would need to know the full folder structure of your project.

Regards,
Tristan

[luclib (Lucas Liberman)]

I have checked if the icon is present in the assets folder.

[Tristan_Bastian]

If you deploy that build the, is the deployed application showing up with the expected icon or are you still seeing the 404 response for the icon request?

[luclib (Lucas Liberman)]

This is weird. I re-deployed the application and I have not gotten a 404 error request. In fact, I don’t see a request for the icon, only one for the logo. The icon continues to be missing from my application and the App Switcher though.

[Tristan_Bastian]

If you right click the app icon in the app switcher and choose inspect, can you check the styles that are applied to the icon?
It should look like this:

In case the icon has been configured in a similar way as here: cumulocity-node-red/frontend/package.json at main · SoftwareAG/cumulocity-node-red · GitHub

[luclib (Lucas Liberman)]

I adjusted my package.json file configuration as shown in the link.

However, the icon is still not being displayed. Here are the styles of for the .c8y-app-icon element

Interestingly, there is no property for background-image as there is in your screenshot.

[Tristan_Bastian]

The styles of the <i> element would be the ones we are interested in, not the <c8y-app-icon>.

The way you’ve adjusted the icon url, you are now missing the leading slash.

Please also ensure that you are not having any customizations as part of your branding.less file, that might influence this.

It would be great if you could provide some version information, so we could actually try and reproduce this.

[luclib (Lucas Liberman)]

I have cleared the branding.less file of any customizations that deal with <c8y-app-icon>. I can now clearly see the path to the icon in my app/assets folder. However the icon is still not displaying.

Here are the dependencies that I am using:

  "dependencies": {
    "@angular/animations": "npm ",
    "@angular/cdk": "14.1.2",
    "@angular/common": "14.0.6",
    "@angular/compiler": "14.0.6",
    "@angular/core": "14.0.6",
    "@angular/forms": "14.0.6",
    "@angular/platform-browser": "14.0.6",
    "@angular/platform-browser-dynamic": "14.0.6",
    "@angular/router": "14.0.6",
    "@angular/upgrade": "14.0.6",
    "@c8y/client": "1017.0.385",
    "@c8y/ngx-components": "1017.0.385",
    "@c8y/style": "1017.0.385",
    "@ngx-translate/core": "14.0.0",
    "@semantic-release/changelog": "^6.0.3",
    "ngx-bootstrap": "9.0.0",
    "pdfmake": "^0.2.8",
    "rxjs": "~6.6.3",
    "zone.js": "~0.11.7"
  },

My @c8y.cli package is also v. 1017.0.385

[Tristan_Bastian]

As said within the last message the icon url should start with: url(/apps/, you are still missing the / in front of apps.
After you’ve adjusted that part, can you check again, if you are now seeing a network request for that icon?

[luclib (Lucas Liberman)]

I have adjusted that part and now I am seeing the 404 error.

[Tristan_Bastian]

Can you maybe just rename the icon to something simple like app-icon.svg and place it in the assets/images folder, so we can avoid the whole blurring of the name and ensure that there are no typos? For that purpose also change the contextPath of the application to something simple like test.
The icon url should then look like this: url(/apps/test/assets/images/app-icon.svg).
Please remove the dist folder in case it is present, build your app and ensure that the dist/test/assets/images/app-icon.svg file is present after the build.
If that is the case, please deploy the app to your tenant and verify that the icon is found when accessing https://<domain-of-your-tenant>/apps/test/assets/images/app-icon.svg.
If this is also working, open the app: https://<domain-of-your-tenant>/apps/test/index.html and check if the icon is also shown in the app switcher.

Regards,
Tristan

[luclib (Lucas Liberman)]

Hi Tristan, I followed your instructions and everything worked as indented.

Though, I am not sure what the lesson is going forward… never create additional subfolders beyond assets/images?

[Tristan_Bastian]

The subfolder should not be an issue, you probably missed something else.
You can try just using your previous subfolder and it should still work. My guess would be some typo, special character or whitespace that is causing this.

[luclib (Lucas Liberman)]

Right. I have an additional question: I tried the same techniques with another iconand I got it to appear in the header bar, but when I deployed it to my tenant the icon did not appear on the App Switcher even though the url was listed correctly within the containing <i>.

The file is an .svg but with dimensions of 300x102 that fits oddly within the .c8y-app-icon container, so I am wondering if the dimensions has something to do with not displaying the icon.

[Tristan_Bastian]

Please check in the network tab if there was any attempt to load the icon and if it was loaded from the correct location.
In general the dimensions should not cause the icon to not be displayed. Depending on your icon it could be that it is displayed in a weird way so that you are actually not able to see it.