How to add or change the source condicon for theia?

#1

Hi,I have a req, i need to change the icon for toolbar command icon, and i found theia is using the vscode condicon.css located ‘node_modules@vscode\codicons\dist\condicon.css’ ,but after i locally replaced the debug-start.svg in the folder ‘@vscode\codicons\src\icons’,it can’t work as supposed.
I‘ve tried to install the condicon packages and build it ,but still useless.

image
image1026×677 61.8 KB

and the condicon.css file was updated to a new timestamp but the content ‘.codicon-debug-start:before { content: “\ead3” }’ was’t updated, still is the “\ead3”
Could u give me some advice on how to cmpile the vscode condicons so that i can make MY debug-start.svg show ?

#2

Hey @passion123,

I haven’t had the need yet to modify the icons, but in theory you should be able to add something like this to your own css files:

.codicon-debug-start:before {
  content: url('local-path/to/svg-file') !important;
}
1 Like
#3

Yes, :sweat_smile:surely we can do it by the ‘important’ in css files thought it is not elegantly.
But i still want to make it clearly, why the codicon.css file has been re-generated which is imported by the toolbar extension, and the old svg file has been replaced in the demo page – “codicon.html”, but can’t be updated on the theia ide page?

#4

@passion123 honestly, no real clue. We just consume the codicon package regularly in order to use the icons as they are for the framework. The only thing I can think of is that it might be some webpack issue/missing config, which for some reason doesn’t respect the newly generated files.

#5

thx for the possibility. i 'll check it in my spare time