Vscode: [file icons] Support for extending the file icon theme from an extension

[dajmaki]

It would be nice if extensions could specify custom file icons for the
file types it supports. For visual consistency this could be implemented
to only be used as a fallback if the user's selected theme does not specify
an icon.

[paniq]

yep. been very sad today to realize i couldn't add a file icon for my custom language. freedesktop icon themes has a very sensible implementation of all this, so i expected it to work here in a similar way as well, but no. sad sad sad.

[AlexShemeshWix]

+1

[arnonkehat]

what's the process for getting a favicon into the themes that are packaged with vscode?

[aeschli]

@arnonkehat New icons for the built-in seti theme should be contributed directly to https://github.com/jesseweed/seti-ui

[RobPurcellUK]

Another vote for this. We have a YAML-based config for an internally-developed system, which I'm looking to create a syntax helper extension for. It'd be really good if I could specify the icon as well.

[allenoleksak]

Upvote for this as well. We have an extension where we are using webviews to create a graphical way of editing metadata in json stored in files of their own extension type. Would be nice to if we could contribute default icons for those file types so the themes are more easily configurable in the future.

[DanTup]

It doesn't seem like seti-ui is active anymore, it's been over 7 months since the last commit and many PRs have not been responding to. VS Code has already had to patch one icon directly because the fix hasn't been merged.

Right now, it seems like there isn't a way to get any new icon into VS Code 😞

[realpack]

My tree of files without icons due to the fact that I have to use extensions for work. 😢

[NavnathKumbhar]

I cloned the vscode repository which I forked. To add a new icon for my language extension, It seems that I have to modify sett.woff font file. Perhaps, I have to add a new glyph for my custom icon.

Is it acceptable change in vscode? Or can I add a image file for my custom icon inside extensionstheme-setiicons ?

Thank you in advance.

[aeschli]

Modifying the woff file isn't the right approach. If you want to contribute to the seti theme directly, please make a PR against https://github.com/jesseweed/seti-ui

The idea here would be to add a mechanism to allow extensions to contribute a icon theme that extends an existing theme, instead of defining its own icon theme.

It's probanly not a lot of work

• extend the iconThemes contribution point: Add an extends property
• when reading the icon theme definitions, also merge in the extenders

[DanTup]

@aeschli that would be great - maybe it's also worth having a way to provide an icon that doesn't need to explicitly list a theme to extend? (for ex. we have a standard Dart icon we'd prefer to use for all unknown themes, but for seti-ui we had to make a single-color version to fit in).

You may also need to consider if two extensions both contribute an extension to a theme with overlapping icons.

If this isn't likely to happen anytime soon, would you consider taking a forked version of seti-ui that has some of the PRs merged? It kinda sucks that right now that we can't get icons added :-(

[NavnathKumbhar]

@aeschli , Thank you for your feedback. Could you please elaborate your below points:

• extend the iconThemes contribution point: Add an extends property
• when reading the icon theme definitions, also merge in the extenders

Thank you in advance.

[aeschli]

maybe it's also worth having a way to provide an icon that doesn't need to explicitly list a theme to extend
yes, we can try that out too.

[aeschli]

iconThemes is an existing contribution point that is used to contribute icon themes. See https://code.visualstudio.com/api/extension-guides/icon-theme for more information.
We could allow one additional property "extends": "id" to signal that this is not a new icon theme but an extension of an existing theme with the id id.

[michaelblyons]

We could allow one additional property "extends": "id" to signal that this is not a new icon theme but an extension of an existing theme with the id id.

This would be great. Even better if id could

1. Be a list of IDs, allowing a single icon to add to multiple icon themes.
2. Allow a "special" object instead of an ID to assign that icon to _any_ addition icon theme that does not have an assignment for that file type.

[sentry07]

As a language extension developer, I don't want to extend any existing icon themes, I just want to provide icons for the files associated with my language. So instead of contribues.iconThemes in our package.json, if we could just use contributes.icons using the tags available in the icon-theme.json, that would be preferable. Like:

[michaelblyons]

@sentry07 That's what I would hope to have as a fall-back as I described in No. 2 here. And that's what I expect most people would use, but you could also contribute variants (No. 1) that tied in to specific, named icon themes as an alternative (Say there's a Seti-Monochrome, for instance).

[Hezkore]

Any news on this?
I just want to extend whatever icon theme the user is using with the icon for the little unknown language my extension adds support for.

[joelday]

@aeschli Would you accept a PR for this based on @sentry07's suggested spec?

[aeschli]

Yes, the suggestion sounds good, I'd be happy to accept a PR. Maybe call it default icons?
Such icons would only show up if

• the current theme has no icon for the given file/language
• the theme shows icons
• shows specific icons (e.g. not in the minimal theme that only shows file/folder icons)

[LadyCailin]

I actually started looking into it the other day. I didn’t get that far, cause it’s fairly decoupled. Maybe @aeschli can point us in the right direction. I see that the icons themselves are actually stored as a Unicode character in the private range. So the question is, how does one insert these icons into the.. font renderer? Font file? I’m not even sure what question to ask really, but somehow the icon is put somewhere so the renderer can turn a Unicode code point into the correct “character”. Anyways, I guess the configuration part, where the icon is loaded from the extension and placed “somewhere”, is fairly straightforward, but this part is less straightforward it seems.

[aeschli]

Yes whats needed is the same as there's in a file icon theme: https://code.visualstudio.com/api/extension-guides/icon-theme#icon-set-file

• A icon definition: declaring a new icon by name, either svg or font
• Font definitions, if fonts are used
• file/folder associations

So essentially it's 3 new contribution points

We have a related discussion in https://github.com/microsoft/vscode/issues/84695#issuecomment-559232230.
Also there we're discussing ways for extensions to contribute named icons (to be used in markdowns, views, menus)

[pagnkelly]

so Any news about this?

[ImUrX]

@aeschli I was making an icon and discovered this doesnt exist, are you guys looking in doing a PR yourselves or can I contribute in the situation

[Antyos]

While I can't speak for everyone who's been watching this thread, it seems like we've all been waiting for _someone_ to finally make a pull request.

I've been working on an extension and similarly want to add an icon for OpenSCAD files. I've only just recently begun to learn TypeScript, so I'm not sure how much I can contribute. I would like to help bring this feature to VSCode, so I'll try to help where I can.

[supercruel]

Any news? Is this in development?

[SPGoding]

Tried to implement this as an idea of my extension has been blocked by this issue for months... I added an icon for mcfunction files in the gif. Seems like it's working :eyes:

Pull Request: #110830. I feel like I did it in a really hacky way, so please help me improve it if you're willing to ;D