Add file icons support in the explorer

[marzubov]

Can you please add file icons support in the tree view?

I know that access from extension to the DOM is restricted. But it will be good to add some language-id attribute to the tree-view element. For example in the render function. So it will be easy to modify view of files with different types with CSS, without modifying DOM.

And also It will be nice to add possibility to add/modify directly CSS from extension.

[samueleaton]

I agree. Here is a screenshot of what I have in sublime.

[roddolf]

+1

[philipgiuliani]

+1 I can find files much faster with the icons!

[zippoxer]

Any progress on this?

[pflannery]

+1

Maybe its possible to add a language and\or file-ext attributes here for themes to render icons?

[TheColorRed]

+1

I mostly have issues trying to distinguish the difference between a file and a folder quickly. There isn't even a text color difference.

[san8pai]

What is interesting is that there is logic in place to add icon classes:
https://github.com/Microsoft/vscode/blob/master/src/vs/workbench/parts/files/browser/views/explorerViewer.ts

private iconClass(element: FileStat): string {
        if (element.isDirectory) {
            return 'folder-icon';
        }

        return 'text-file-icon';
}

As seen above, vscode currently adds a folder-icon css class to all folders but a style is not defined for it. So if you want to see folder icon in explorer, all you have to do is add the below styles to /resources/app/out/vs/workbench/workbench.main.css

.monaco-tree-row .content .sub-content .explorer-item.folder-icon {
    padding-left: 22px;
    background: url(./parts/files/browser/media/Folder.png) 1px 4px no-repeat;
}
.monaco-tree-row.expanded .content .sub-content .explorer-item.folder-icon {
    padding-left: 22px;
    background: url(./parts/files/browser/media/Folder_opened.png) 1px 4px no-repeat;
}
.explorer-item.text-file-icon { 
    padding-left: 22px;
    background: url(./parts/files/browser/media/Textfile.png) 1px 4px no-repeat;
 }

and copy the below icon images to /resources/app/out/vs/workbench/parts/files/browser/media
Folder.png
Folder_opened.png
Textfile.png

Here is a preview of it in action:

In it's simplest form, implementing the file icon feature would require modifying the above iconClass method to return 'text-file-' + getFileExtension(element.name) and adding corresponding icon svg/font to each css classes (i.e., text-file-js, text-file-md, etc.)

[philipgiuliani]

Nice find @Snpai. It would be very easy if they could add another class like text-file text-file-md. So extensions could use it to just add another CSS with all the icons.

[nelsonlaquet]

This feature is sorely needed, and is trivial to implement. I was able to use @pflannery's fork and https://github.com/mrmartineau/SetiUI-Icons-Sublime to add in default icons right into the my own build.

One thing though: some files should be themed based off of more than extension. package.json, gulpfile.js, etc should be themed based off of name. I suppose adding built-in support for specific filename classes would be better (faster/less cluttering to the DOM) than adding a class for the entirety of every file's name.

While we wait, does anyone have a comprehensive, "good" looking grayscale icon pack? The icon pack I used doesn't mesh very well with the dark theme and is a little distracting.

[pflannery]

@nelsonlaquet you made a good point about the gulp, grunt and package.json files and thanks for linking the icons too.
I've updated my PR which puts the filename in to attributes allowing special icons for specific files.
I've also added support for css theming because I feel that this is the cleanest and simplest way to deliver this feature.
Check out my comments here for more info #3200 (comment)

[nepaul]

+1
I can find files much faster with the icons!

[fa7ad]

Is the file tree exposed to extensions api? if you can expose it, i think that would allow the community to create an extension for this and for any further opinionated customizations all the while VSCode itself can remain neutral on the issue

[ivogabe]

If that would be added, I'd like to port my icon extension (Brackets Icons) for Brackets to VS Code. In Brackets, an icon provider can be added, which is a function that returns an icon as a DOM element for a specified file name (docs). Since VS Code doesn't expose the DOM, there should be a layer between, but similar ideas can be used.

[bpasero]

No API atm to change the explorer.

[fa7ad]

@bpasero is there plans for such a thing in the near future? if yes, any rough ETA?

[bpasero]

@egamma @chrisdias please chime in.

[ghost]

+1

[donaldpipowitch]

@bpasero Could you list the needed acceptance criteria to get a pull request merged? Maybe I could help then.

[bpasero]

@donaldpipowitch I would think this feature should:

• be configurable with a flag in settings
• provide the necessary icons for all themes (SVG)

Still, our PM/UX might decide to veto. @chrisdias @stevencl please chime in.

[fa7ad]

@Tyriar do you guys (core team) have a proper API planned then? I understand this is a hack, but this is as close as we can get without support from the core team.

[gsaadeh]

Thanks for the explanation @Tyriar. I agree that it's a hack but at least it will keep a few of us happy until the official support. If there is an existing plan of how you guys want to implement it, I will be very glad to contribute.

[Tyriar]

A few of us have been talking about it, we need to have a team-wide discussion ideally in a GitHub issue.

[marzubov]

Thanks, @robertohuertasm for making an extension that gives file icons to the vscode is really nice, even if it's hacky.
Since the team is spread and focused on other tasks, I think it will be good to analyze and propose some changings to existing extension API, that will allow fully support extensions like vscode-icons without any hacks and won't break existing one. Then we can apply changes to the fork and make a custom build, so users could easily install it and perhaps even update.
Any thoughts?

[Sequoia]

I know I should know better than to armchair project-manage, but this feels like low hanging fruit with a big ROI. I like VSCode for it's deep support of various JS features + intellisense --icons aren't a make or break feature for me-- but there a lot of people for whom this is a make-or-break feature. I guarantee there are visually oriented folks who will try VSCode then quickly bounce back to Sublime/Brackets/whatever when they see that this basic feature is missing.

My intuition-based belief: not having this feature will have a significant negative impact on the adoption of VS Code. It's silly but I believe it's true. I care because I really like VS Code & I am recommending it to people, I want them to like it. 😸

[miguelchico]

+1

[leaxoy]

+1

[darkguy2008]

Any progress on this? I want to replace sublime with vscode but it's hard to find file types without icons. I can't believe something so essential is missing...

[gsaadeh]

@darkguy2008 For now you can use https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons until the official support. It works well!

[darkguy2008]

@gsaadeh yeah I just found it, thanks! it takes some trial and error to get it installed and working at first though. It'd be a good idea to merge the extension in VSCode's core though 👍

[MarkPieszak]

If anyone has issues on Windows7 with the icons not appearing:

Just figured it out. For some reason even when pushing "Enable" it doesn't fire the event. I had to do:

ctrl-shift-P
then type:
Icons Enable

Then they appeared. Just a note for anyone else who runs into it!

[wbsdty331]

+1
Very useful feature.

[aeschli]

Added support for file icon themes. See #10804 for documentation.