Vscode: Use icon fonts for product icons

[misolori]

Summary

This is to track updating our icons to use our new icon font (codicons) in the workbench. This will allow us to:

• Style icons dynamically (themeable)
• Allow theme authors to provide color tokens for icons
• Unify Octicons + VS Code icons into a single icon library

This would allows to do something like below where icons inherit the foreground color of their element:

_Notice how the icons in the selected element are different a color than the rest state_

Related Issues

• Provide library of icons for extension authors #74974
• Twistie/Progress/Octicons/Actions hard to see in light theme when selected #55857

Out of scope

• Allow extensions to define icon name via contribution points (requires API changes) https://github.com/microsoft/vscode/issues/31466

Adoption areas

• [x] Activity Bar
• [x] Sidebar
  
  
  
  • [x] Explorer
  
  
  • [x] Search
  
  
  • [x] SCM
  
  
  • [x] Debug
  
  
  • [x] Extensions
  
  
  • [x] Outline
  
  
• [x] Panel
  
  
  
  • [x] Problems
  
  
  • [x] Output
  
  
  • [x] Debug Console
  
  
  • [x] Terminal
  
  
• [x] Notifications
• [x] Find widget (editor, terminal)
• [x] Editor
  
  
  
  • [x] Folding
  
  
  • [x] Lighbulb
  
  
  • [x] IntelliSense
  
  
  • [x] Breadcrumbs
  
  
  • [x] Breakpoints
  
  
  • [x] Diff
  
  
  • [x] Peek
  
  
  • [x] Actions
  
  
• [x] Tabs
• [x] Settings
• [x] Keybindings
• [x] Dialog

Verify it works in

• [x] Monaco standalone editor
• [x] Custom views (extensions)

[misolori]

Here's a demo of what's possible if we do this:

• Reference icons via class names (removes the clutter of svg icons)
• Dynamically style them via color tokens
• Allow extension authors to reference them via class names
• Reduce file sizes from ~2.5mb => 51kb

[equinusocio]

Please use a modern approach with SVG icons, not hacky fonts. With SVG you can customise everything, size, color, gradients fill, animations, fill opacity. You can even use SVG icons as mask for opacity shades (using black-to-transparent gradient, see example).

SVG technology is the today way to handle icons while fonts are an hacky approach made almost 7 years ago. Fonts are hard to maintain, require a lot of CSS code (for example a class for each icon) and they are really huge in terms of KB's.

[misolori]

@equinusocio thanks for the suggestions, but we already use icon fonts with file icons and Octicons.

[equinusocio]

Yes i know, but every font icon is generated from single svg files. What i'm suggesting is to improve loading/rendering performance and maintainability by using the SVG files directly and move away from icon fonts. So you still use your file icons and octicons but as SVG. With this improvement theme authors can also provide their icons to customize the workbench :)

[patrys]

There is a great post from GitHub on why dropping icon fonts is a good idea: https://github.blog/2016-02-22-delivering-octicons-with-svg/

[natis]

Please add the ability to have custom icons in the sidebar and status bar.