Change:
<!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: No (N/A) <!-- If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. --<!-- Issues caused by an extension need to be reported directly to the extension publisher. The 'Help Report Issue' dialog can assist with this. --- VS Code Version: 1.86.0 OS Version: Windows 11 (according to VSC, Windows_NT x64 10.0.) In a Product Icon Theme I am developing (), 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 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 . This occurs despite my file correctly defining the close icon as: ! 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:
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!
We need to avoid hardcode characters in CSS. So, if possible remove. If not easily possible, add ` rule. It looks like there's a close icon set that is properly themed and that sets the font family.
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.

Discussion:
.monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before, .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.sticky.dirty > .tab-actions .action-label:not(:hover)::before { content: "ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ <ins> font-family: 'codicon'; </ins> } .monaco-workbench .part.editor > .content .editor-group-container.active > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before, .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.dirty > .tab-actions .action-label:not(:hover)::before { content: "ea71"; /* use `circle-filled` icon unicode for dirty indication */ <ins> font-family: 'codicon'; </ins> } .monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active > .tab-actions .action-label,

.open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .codicon-pinned::before { content: "ebb2"; /* use `pinned-dirty` icon unicode for sticky-dirty indication */ <ins> font-family: 'codicon'; </ins> } .open-editors .monaco-list .monaco-list-row.dirty:not(:hover) > .monaco-action-bar .codicon-close::before { content: "ea71"; /* use `circle-filled` icon unicode for dirty indication */ <ins> font-family: 'codicon'; </ins> } .open-editors .monaco-list .monaco-list-row > .monaco-action-bar .action-close-all-files,