Unable to hide app icon from header bar in Web App

[luclib (Lucas Liberman)]

I am exploring branding with Cumulocity’s Web SDK v.1019. I want to remove the app icon that appears in the navigation and header pannel.

I have identified the class that holds the icons as .app-noicon and have tried to hide it via LESS in the styles.less file but, so far, it has only applied to the navigation bar.

styles.less

@import '~@c8y/style/main.less';

.app-noicon {
    display: none;
}

Is this one of those cases where I have to deploy the application first to Cumulocity to see the effects?

[Tristan_Bastian]

Hi @luclib,

this is again pretty simple CSS functionality that we expect someone who is writing custom CSS to take care on their own.
Your CSS rule is overruled by a more specific rule. You would need to use a more specific identifier.:

A more specific identifier could look like this:

.header-bar .app-noicon, .app-noicon {
  display: none;
}

As an alternative to a more specific identifier, you can also use:

.app-noicon {
  display: none !important;
}

Note that using just .app-noicon or .header-bar .app-noicon as a selectors might not be the smartest idea as this could also affect places that you might not intended to touch (e.g. the application switcher). Try to be as specific with the selectors as you can in case you only want to target specific places.

Regards,
Tristan