VSCode

Display file theme icons in a VSCode TreeView

I am working on a new extension for VSCode that uses a Virtual File System and displays a folder and files tree using the TreeView API. A TreeItem object represents a file or a folder and it can be customized to better represent the object it represents: folder for example can be expanded to show their content through collapsibleState, or a command to execute when the item is clicked in the TreeView (for example this allows to open a file in a new editor).

It is also possible to customize a TreeItem appearance with an icon, very useful to visually identify item types:

TreeItem icons

Here comes the lesson learned.

Since my extensions deals with files and folders, I wanted them to respect the user’s theme so I set iconPath to the appropriate value from ThemeIcon

this.iconPath = nodeContent?.type === ContentType.file ? ThemeIcon.File : ThemeIcon.Folder;

Anyway, running the extension, presented me with this:

TreeItem generic icons

All the TreeItem instances respect their assigned type (file or folder) but they are definitely not using my icons theme.

It took me some back and forth before I noticed this in the TreeItem documentation:

resourceUri

The URI of the resource representing this item.

Will be used to derive the label, when it is not provided. Will be used to derive the icon from the current icon theme, when iconPath has ThemeIcon value.

So…. iconPath is fine on its own for custom icons (you have to pass the path of the icon file you want to use), but to user the user’s icon them one must also use the resourceUri property.


Knowledge is ancient error reflecting on its youth – Francis Picabia

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.