[file icons] Adding default fileicon support to language contributions

[ghost]

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 extensions\theme-seti\icons\ ?

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 :-(

[aeschli]

With the newly add icon contribution point (proposed API), we now can extend language definitions to name a default icon for the language.
That icon would be used if the current file icon theme uses file icons and has not defined a icon for the language (or file extension).

    "languages": [
      {
        "id": "foo",
        "aliases": [ "FooLang" ],
        "extensions": [
          ".foo"
        ],
        "icon": "foo-icon"
        "configuration": "./language-configuration.json"
      }
    ]

foo-icon is an icon contributed like here: #114942 (comment)

Any takers? Otherwise I can give it a try in the coming weeks.

[Mai-Lapyst]

Hi,

im currently working on a patch, but I found out that there are actually several ways one could implement the feature,
so I am asking here for feedback which way would be the best way to implement it.

1. Since all file icons relevant css is generated in FileIconThemeData, one could simply generate fallback css if the icontheme don't provide icons for the language

2. another place to implement would be WorkbenchThemeService, since it's manages all themeing relevant data

3. way would be to change the behaviour of getIconClasses.ts so its also adds 'codicon-*' classes when its detect a modeId

2 & 3 could potentially involve updating treeView.ts Aligner.hasIcon() since it's only checks fileIconTheme.hasFileIcons and node.icon/node.iconDark, but it's unsure at the moment.

1 & 2 would duplicate some css, since the relevant code would be in a 'codicon-*' and a '{modeId}-lang-file-icon' class.

[Mai-Lapyst]

I've done some testing and got some updates on the 3 ways I explained above:

option 3: is out; since the codicon css has a lower precedence than the default icon from the icontheme, adding the 'codicon-*' class to the element dosn't do anything.

option 2: can work; but the new rule overwrites the 'font-family' css attribute of the iconTheme, which will lead to incorrectly rendered icons since the icontheme's icon is not present in the font of the default icon. we can prevent this through setting the 'font-family' attribute on all css classes generated by a icontheme.

option 1: here we need to change a few function headers:

• _processIconThemeDocument
• FileIconThemeData.load
• FileIconThemeData.reload
  so we can move the IModeService from WorkbenchThemeService to the processing function that generates the css.
  this approach also woudn't need the patches as in 2. because we can test the theme if it has any overwrite for the any of the registered languages.

[aeschli]

Option 1 sounds good to me. ok tot pass the IModeService to load and reload. You can also move load and reloadto a new class FileIconThemeLoader (or a better name) that gets the services in its constructor.

[NavnathKumbhar]

Hello,
Has this issue been fixed already?
I tried below way as mentioned by @aeschli , but it is not working for me.

"languages": [
{
"id": "foo",
"aliases": [ "FooLang" ],
"extensions": [
".foo"
],
"icon": "foo-icon"
"configuration": "./language-configuration.json"
}
]

As this issue is in closed state, should I expect the fix in coming VSCode update?

[ImUrX]

@NavnathKumbhar you can see it has the insiders-released tag right now, so its only available on the insiders build. You can see that another issue was made too which is #140047

[aeschli]

The API is now final. See #140047 for the details.