How to import custom icons into theia

#1

hi,
I build my application based on theia blueprint, I develop custom function, I want to add these functions to toolbar or menu, My problem is that I want to use my icons for my functions in toolbar and menu, I am not sure how to import icon into theia, for example what format should my icons should be, is it svg or tiff font icon? I have seen there are builtin icons and fontware icons when add function in toolbar, could I add myself icons to the dropdown selection?

#2

Theia is pretty unopinionated in what it accepts there. By default, Theia mostly uses codicons, which are stored in a .ttf file, but SVG files are also fine. In fact, vscode extensions can contribute both (as soon as #12912 gets merged).

#3

hi,
if I have a tiff file ,what should I do for using its icon in theia, could you give some simple details?

#4

As far as I’m aware, most browsers don’t support tiff files. You will need to convert the file into a more widely supported format such as .png.

#5

hi
I create a toolbar and add a command to it. I want to use a custom svg icon for it. but the icon not dispaly in toolbar. how could I do to use custom icon for mycommand in toolbar

image
image767×203 14.7 KB

image

#6

@wss As long as the memory-view.svg file is in the same directory as the css file that declares the .memory-view-icon class rule, that should work. Do you get any error output from webpack?

#7

hi,
it has no error info, just dispaly empty as follow image show. i import css in front module. to display custom icon in toolbar is import for me, or I can not publish my application. have you ever try custom icon in toolbar? I currently use theia 1.32.0
image
image

image
image751×227 71.3 KB

#8

Are you sure that mask is the correct css property for icons in the toolbar? By default, these items are using codicons (i.e. a font) with an ::before rule. background might be a better choice for that. Can you somehow ensure that the svg file is getting bundled with the frontend application (via Chrome devtools or whatever)?

For example we’re using svg for plugin icons internally in Theia, and use the background property for that: https://github.com/eclipse-theia/theia/blob/62994147fbf8e4af0dae70f3f67ba7a09dba524c/packages/plugin-ext/src/main/browser/plugin-shared-style.ts#L113-L120

#9

hi,
backgrond works, but need set background-size,or it will not display
image
image