[themes] Add product icon themes

[aeschli]

Fixes #79130

• productIconThemes definition files, with font specification and icon definitions (name -> font character)
• JSON schema for product icon themes associated to -product-icon-theme.json
• New contribution point productIconThemes
• new setting workbench.productIconTheme
• Test Product Icons example in vscode-colorize-tests
• icon registry with all themable icons
• allow to contribute to icon registry from icon contribution point --- Extracted as Allow to contribute to icon registry from icon contribution point #114942
• update svg references to use codicons Cleanup remaining svg icons #86708
• 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
• finalize API Finalize product icon theme contributions #113828

[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 microsoft/vscode-extension-samples#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"
}

[miguelsolorio]

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!

[peterpoliwoda]

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

[felixhao28]

What if I want to add a new icon instead of overwriting an existing one, just to use it in my own extension?

[usernamehw]

Would it even be possible to manually merge multiple extension icons into 1 Frankenstein extension?

[aeschli]

Yes, an extension can define any number of product icon themes. It's the same as with file icons. Check out the product icon sample: https://github.com/microsoft/vscode-extension-samples/tree/master/product-icon-theme-sample

[usernamehw]

I was looking for tools to merge .woff files and forgot that there was a build task in extension sample that generates font from .svg. If extension authors were to use this extension sample then it should be easy to merge multiple product icons into 1.

[aeschli]

I just pushed to insiders that product icon themes are now official API

[aeschli]

Closing this issue. #114942 is for the icon contribution point

[Hezkore]

I still don't quite get how I would use this to add an icon to certain file types or languages.
For example, if I want to add an icon to .bmx files, how would I use this?

[PKief]

@Hezkore Product icon themes are not built to change the icons of files or languages. I think what you mean are the file icon themes.

[Hezkore]

Yes, but that would replace ALL icons.
So for example, if I add support for .bmx then all .js files will have an empty icon.

Multiple issues and a few pull requests regarding this was closed and redirected to this fix.
For example this: #110830
So I was under the impression that this was added as well.

[aeschli]

@Hezkore See #14662 (comment). Let's discuss it in that issue.