Custom Product Icons broken by static stylesheets

[rektdeckard]

Does this issue occur when all extensions are disabled?: No (N/A)

• VS Code Version: 1.86.0
• OS Version: Windows 11 (according to VSC, Windows_NT x64 10.0.22621)

In a Product Icon Theme I am developing (link), I am observing strange icons appearing where they shouldn't, as a result of some static styles in the application not being aware of custom font glyphs in product icon themes.

As an example, the close icon of a dirty tab renders as a couch icon when my theme is applied. In my theme's font, the couch happens to be the glyph at unicode \ea71. This occurs despite my *product-icon-theme.json file correctly defining the close icon as:

{
  ...
  "iconDefinitions": {
    ...
    "close": {
      "fontId": "phosphor",
      "fontCharacter": "\\eddb" // my 'X' close icon
    }
  }
}

In most situations, my product icons appear correctly. But certain cases, many of which appear to be overridden by hard-coded unicode code points in static CSS files associated with the Editor, it does not. I believe this stylesheet below is the culprit in the example above:

https://github.com/microsoft/vscode/blob/2aae82a102da66e566842ff9177bceeb99873970/src/vs/workbench/browser/parts/editor/media/multieditortabscontrol.css#L391-L393

[VSCodeTriageBot]

Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.86.1. Please try upgrading to the latest version and checking whether this issue remains.

Happy Coding!

[aeschli]

@benibenj We need to avoid hardcode characters in CSS. So, if possible remove. If not easily possible, add font-family: 'codicon' to thetab.dirty` rule.

It looks like there's a close icon set that is properly themed and that sets the font family. https://github.com/microsoft/vscode/blob/df4af4aefd2348eb20dbd2bdc9322042fa71733c/src/vs/workbench/browser/parts/editor/editorActions.ts#L449

[benibenj]

There is a bit of a trick going on here. We are overwriting the close codicon with the dirty codicon when the file is dirty and the action is not being hovered. It's rather complex to solve this without hardcoding the value in css. I'll temporarly fix it by adding the font family and I'll try to think of a more elegant solution for this.