set custom icon for my custom widget (newb)

[daleasberry-n]

I have put boxes.svg into the src/browser/style directory with index.css. It has the entry:
.playground-icon-class {
background-image: url('playground.svg');
background-size: contain;
width: 16px;
height: 16px;
display: inline-block;
}

in my playground-widget.ts I have:
protected async doInit(): Promise {
this.id = PlaygroundWidget.ID;
this.title.label = PlaygroundWidget.LABEL;
this.title.caption = PlaygroundWidget.LABEL;
this.title.closable = true;
this.title.iconClass = 'playground-icon-class';
this.update();
}

When I run Theia, the widget is displayed correctly except for the icon. I don't even think the build is picking up the svg. What am I missing?

[msujew]

Hey @daleasberry-n,

Does the build pick up your css at all? Do you have an import in your TypeScript code like this:

import "../../src/browser/style/index.css";

[daleasberry-n]

Looks like it's not provided out of the box in theia's default webpack.config.js. Since I'm relatively new to Node programming, I didn't know I needed to look there and update it.

[msujew]

It's not (directly) part of the webpack config. You just need to import the css for it to be included in your typescript bundle. See:

theia/examples/api-samples/src/browser/api-samples-frontend-module.ts

Line 27 in 02f4192

import '../../src/browser/style/branding.css';

[daleasberry-n]

Found the answer in the css:
.unclosable-window-icon {
-webkit-mask: url("window-icon.svg");
mask: url("window-icon.svg");
}

I was using
background-image: url("window-icon.svg");

[daleasberry-n]

Is there an example project somewhere? Can't find in the documentation how to do it and CoPilot is just going in circles.