Vscode: Include more icons

[agauniyal]

Is it possible to include more icons to be shown in status bar? Currently vscode supports only octoicons, which might not have all required icons.
Including https://github.com/vorillaz/devicons/ would be a good idea too.

[jrieken]

I am in favour of more glyphs, tho unsure about the devicons cos the a missing license. Do you have other suggestions?

[agauniyal]

Devicons iconic font is free to use and licensed under MIT.

Anyways there are plenty to choose from. Most popular is - http://fontawesome.io/icons/

[bpasero]

@jrieken fyi we could update to a newer octicon version, I think they added some new icons and updated existing ones. we are on a quite old version.

[mrmlnc]

@bpasero, Maybe then remove extra font versions (ttf, eot, woff) as we have one "browser" - Chrome?

After update to a newer octicon version we get 10 new icons and lose 1 icon (color-mode). New icons:

1. bold
2. text-size
3. italic
4. tasklist
5. logo-gist
6. verified
7. smiley
8. unverified
9. grabber
10. plus-small

[jrieken]

also removes

screen-normal
screen-full

Unsure how much of a breakage that is...

[bpasero]

That sucks, but maybe we can detect this and offer some kind of migration. Or actually build our own fork of Octicon that still includes these removed icons to have a more complete set.

[jrieken]

Yeah, we could bundle both and use the old if one of the three removed was used (have a special class name maybe)

[ryanoasis]

Hey just stumbled upon this and don't necessarily mean to self promote but could nerd fonts be of help for this?

[jrieken]

@aeschli Any API with which I can reuse your existing work on icon sets?

[aeschli]

We should think of making an icon contribution point where an extension can publish a list of named icons. Such a named icon could then be used at places like the status line (maybe even in the completion proposals list?)
The icons can be defined in a font or be an SVG located in the extension.
The file icon theme could also use that contribution point. Right now the file icon theme definition file contains both: Icon definitions and file to icon associations.

[jrieken]

Right now the file icon theme definition file contains both: Icon definitions and file to icon associations.

Would it make sense to break thing up into icon set and icon association with this milestone? Then we don't end up with two stories of defining icons that are reusable and those that aren't reusable?

[jrieken]

@aeschli ping.

[jrieken]

Moving to September as this grew larger but also into a more powerful future-proof story.

[nfantone]

@aeschli

The icons can be defined in a font or be an SVG located in the extension.

Is this _currently_ possible or are you planning on supporting it in a near future? Because many of the file icon theme repos I've seen contain icons in .png format.

[aeschli]

File icon sets can also use png.

[nfantone]

@aeschli Right. My question was more about font-faces. I know .png files can be used, I was asking about whether you could use something like FontAwesome or Devicons on a custom theme.

[joaomoreno]

Proposal

I'd love to reference icons from an Icon Theme in the status bar. We could use the $(theme_id:icon_id) syntax, provided that : isn't a valid id character... which likely isn't true; but we can surely find some syntax. Both SVG/PNG and font glyphs should be supported.

• theme_id matches the Icon Theme identifier contributes.iconThemes[].id
• icon_id matches the one of that theme's icons in the iconDefinitions section

@aeschli @jrieken thoughts?

[jrieken]

I like the proposal and given my understand of @aeschli's work it should be doable like that

[aeschli]

What if a theme id can not be found? Or does it mean that practice you can only reference the minimal and seti theme?

[joaomoreno]

If both ids don't match anything, no icon will be shown. Possibly we can print a message to the console. It should be possible to reference any icon from any icon theme.

[aeschli]

Wouldn't you rather want to specify an abstract icon identifier ('folder', 'errorIcon') that then can be provided by icon themes?
That would give us theming.

[joaomoreno]

I see. How about:

• $(theme:icon) picks a specific icon
• $(:icon) picks a themeable icon from the active theme (file, folder, etc)
• $(icon) picks an octicon

[aeschli]

Yes, sounds good!

[misolori]

Since this issue is about using additional icon packs, i'm going to merge this into https://github.com/microsoft/vscode/issues/92791 where extensions can replace the default icons.