Angular Material breaks when using self developed Widgets

[Arijit_Chatterjee]

Using Angular Material version 12 in Cumulocity IoT breaks the application design . In web every thing works fine but after deploying in Cumulocity IoT , the design breaks. It breaks when using self developed Widgets .Nothing of Material component works . Suggest some solution to use Material in COT.

[Tristan_Bastian]

Hi,

to make the angular material branding available globally, you can create a brandingEntry.less file in your project root with the following content:

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import '~@c8y/style/main.less';

You can then reference this file with the brandingEntry application option within your package.json: Web SDK documentation
The c8y section of your package.json could then e.g. look like this:

  "c8y": {
    "application": {
      "name": "material-cockpit",
      "contextPath": "material-cockpit",
      "key": "material-cockpit-application-key",
      "upgrade": true,
      "brandingEntry": "./brandingEntry.less",
      "dynamicOptionsUrl": "/apps/public/public-options/options.json",
      "contextHelp": true
    },
    "cli": {}
  }

Regards,
Tristan