Vscode: [themes] Add product icon themes

[aeschli]

Fixes #79130

• [x] productIconThemes definition files, with font specification and icon definitions (name -> font character)
• [x] JSON schema for product icon themes associated to -product-icon-theme.json
• [x] New contribution point productIconThemes
• [x] new setting workbench.productIconTheme
• [x] Test Product Icons example in vscode-colorize-tests
• [x] icon registry with all themable icons
• [ ] allow to contribute to icon registry from icon contribution point
• [x] update svg references to use codicons #86708
• [x] product icon theme selection command
• [ ] name icons ids like we did it with color ids (id describes icon location glyphMargin.collapedRange, not the chosen representation (chevron-right). However we want to keep chevron-right as these can be accessed in Markdown or labels using `$(chevron-right)
• [ ] update code references to unicode characters (git decorations, debug breakpoints, etc.)
• [ ] allow codicons to be used in webviews
• [ ] have helper wdget that makes it easy to host an image

[usernamehw]

Do you have a build task to generate the product icon font .woff? At this moment I have no idea how to easily create a product icon font, even though there's already an example and documentation.

[aeschli]

For the sample I used an online tool, https://icomoon.io/app/#/select, but a build task would be great. I created https://github.com/microsoft/vscode-extension-samples/issues/303

[HaoboGu]

@aeschli A quick question: can we customize icons in completion list?

[PKief]

@HaoboGu yes, these icons are prefixed with symbol-, for example you can use the following configuration:

"symbol-string": {
  "fontCharacter": "\\EA46"
},
"symbol-module": {
  "fontCharacter": "\\EA47"
},
"symbol-namespace": {
  "fontCharacter": "\\EA47"
},
"symbol-package": {
  "fontCharacter": "\\EA47"
},
"symbol-object": {
  "fontCharacter": "\\EA47"
}

[misolori]

You can also reference our product icon documentation for the list of the icons and names. It's worth noting that we don't have full support for product icon theming yet, which is what this issue is tracking.

[HaoboGu]

@PKief Thanks a lot!

[DeltaRazero]

Are there any plans to allow setting color data for an icon (i.e. not using color theme definitions, but defining them in the product icon theme)? Furthermore, are there any plans to allow for using .svg directly, instead of referencing a glyph in a fontmap?
A limitation of font formats (with exception to color font formats) is that no color data can be stored. Therefore, an icon like in the example below wouldn't be possible to properly include, right?

[aeschli]

It's intentional that glyphs only have a single color. We want the color come from color themes. The color must work well with all other colors in the theme, in particular with the background color(s).

[usernamehw]

Does the current model allow multiple extensions to make changes to icons? Example:

• one extension changes suggest icons
• the other extension contributes activity bar icons

Are they going to be merged or it is not allowed?

[misolori]

@usernamehw it would work just like File Icon themes, you can only select one.

[boaz-codota]

Any ETA on when this will be ready?

[aeschli]

@boaz-codota The finalization of this feature has gotten pushed back due to other priorities.
Is there a particular thing you are waiting for?

[peterpoliwoda]

+1 one for me, I'd love to be able to change a single icon, as in the above issue #110240