How can i use custom icon as my widget icon in theia?

Right now we use the default icon by coding “this.title.iconClass = ‘fa fa-window-maximize’;”, but how can i use custom icon instead? Please help, thank you.

[original thread by AlwaysMing]

The explorer (navigator) uses a custom theme (one that is not from FontAwesome). The idea is to provide an iconClass which you then reference in css and add your icon:

I’m trying to play with setting a custom icon in the ‘hello world’ widget and noticed there was a migration on this in https://github.com/eclipse-theia/theia/blob/ec7ed046b56f803490c85363ea47a09967cd57ff/packages/navigator/src/browser/navigator-layout-migrations.ts#L56 - is the advice of using still applicable for new widgets? Specifically should one still use navigator-tab-icon in the style.css?

Thanks for any pointers! Completely new to Theia & Typescript and trying to wrap my head around things.

@vivekgani I believe the migration was when the project moved from font-awesome icons to codicons for widgets, the migration was necessary for older applications that possibly had layout data stored in the local-storage. For new widgets you should not need to worry about it :slight_smile:

Got it, to help anyone searching for this, here’s roughly how to do it if you were starting from the ‘widget’ example in https://github.com/eclipse-theia/generator-theia-extension :

  1. Add an svg file (e.g. ‘my-widget-icon.svg’) to your widget’s style folder. You may want to look at the codicon svg files to get an idea around stroke weight and such.

  2. In your widget’s css file, add a css class referencing the icon using the mask - this is used to help deal with active/inactive/hover states of the icon and be inline with the flat style used in theia:

.my-widget-tab-icon {
    -webkit-mask: url('my-widget-icon.svg');
    mask: url('my-widget-icon.svg');
}
  1. In your widget’s base file (possibly called my-widget-widget.tsx), there’ll likely already be an assignment to this.title.iconclass to a codicon or fontawesome class. Change it to the css class you created in css, so
        this.title.iconClass = 'my-widget-tab-icon'; 
  1. back in your project’s directory run yarn prepare to reload the widget then the appropriate ‘yarn start’ to see it in the browser or electron build.

I think I was getting confused earlier in the wording of: