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 https://github.com/Microsoft/vscode/pull/3200#issuecomment-194656772

[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.

[donaldpipowitch]

@bpasero Thank you. Could you define "be configurable with a flag in settings" a little bit more? What do you want to configure?

• show/hide icons
• match existing (built in) icons to file patterns
• change existing (built in) icons to custom icons
• ...?

[bpasero]

I think the first step would be to allow to show/hide built in icons. Being able to customize icons from themes is a lot larger task and would probably fall into the category of being able to theme the entire workbench (#3112)

[stevencl]

In the past we had explored icons in the explorer but we were concerned about the 'Christmas tree' effect (where the number of differently coloured icons is distracting rather than helpful). Perhaps it is due more to the icon designs we used at the time but when we experimented with this we found that when we took the icons away there was no negative impact on productivity or product satisfaction. So we went with that option as we have always tried to design the product so that the main focus is on the code and not on any of the UI.

However, after saying all of that, we're obviously not opposed to anything that helps users use the product more effectively so if the consensus is that this adds value, I am fine with it. I would just reiterate @bpasero's request that there should be an option to enable and disable the icons in the explorer.

[donaldpipowitch]

Thanks. I'll try it. Please be patient, it would be my first contribution to the vscode code base.

[fa7ad]

@stevencl I understand your concerns, to some people it can be distracting. that's why I think the idea of being able to disable/enable it is a good one.

One other thing I want to suggest is the use of SVG icons, rather than raster types like png, that way the icons could be following the color scheme of the current theme and not be multi-colored and distracting.

[Tyriar]

I'd personally love to see this added, good quality icons that are easy to distinguish are very useful in reducing the time it takes to find a file in the file explorer. Plus when done right, it can makes the editor look quite beautiful.

Having said that, I don't see this working with a single icon set for dark and light themes. It should be extensible so that users can develop "icon packs" and plug them into any theme.

Re Christmas tree effect: They don't even need to be color icons or even on by default.

[pflannery]

This is what PR #3200 already solves for this feature:

• Icons packs as a standalone icon theme (they can also be included with colour themes)
• 'No icons' as an option (currently defaults to this)
• Capable of using SVG as icons
• Colouring of file\folder resources

What it doesn't include is:

• Exposing Icon or Colouring via javascript extensibility.
• User theme settings (i.e. settings stored globally or with the .vscode folder)

I believe we're now just waiting for the 6 month goal plan as mentioned here https://github.com/Microsoft/vscode/pull/3200#issuecomment-196675666 to get the green light on this feature.

[donaldpipowitch]

@pflannery I'm confused. I thought this pull request was rejected. Do you want to finish it? I wouldn't start another pull request then.

[Tyriar]

@donaldpipowitch see https://github.com/Microsoft/vscode/pull/3200#issuecomment-196675666 for context

[fa7ad]

so there's no hope for icons? :cry: why?!

[pflannery]

@donaldpipowitch From what I understand the PR is on hold until they make their plan after the March release. The PR has not been closed by anyone on the team and I'm still happy to push it through.

@fa7ad I'm sure icons will make it and hopefully sooner than later.

[donaldpipowitch]

@pflannery Okay, thanks. Good luck to you and thank you for the pull request so far :)

[jeysak]

My icons for the dark theme.

[cloverhsc]

+1

[fa7ad]

@jeysak how's you do that? make a gist. until vscode master does something, I need a temporary solution :3

[jeysak]

@fa7ad read snpai comment.

[skol-pro]

Cool, @snpai stuff is working ! Regarding explorer viewer, is there any way to alter it from the vsCode API ?

[equinusocio]

CSS

.monaco-tree-row .content .sub-content .explorer-item.folder-icon {
    padding-left: 22px;
    background: url(./parts/files/browser/media/Folder_inverse.svg) 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.svg) 1px 4px no-repeat;
    background-size: 16px;
}
.explorer-item.text-file-icon {
    padding-left: 22px;
    background: url(./parts/files/browser/media/File.svg) 1px 3px no-repeat;
    background-size: 16px;
}

Icons

icons.zip

[TheColorRed]

Wow these Icons make it look like a whole new editor!

If anyone makes it so Icons can be added they should make sure people can add Icon packs to the marketplace that can be used with the editor.

[HunterMitchell]

@jeysak Please tell me how you did that: https://github.com/Microsoft/vscode/issues/211#issuecomment-210210437

[san8pai]

@FeaRCODE Please refer to my comment above

[Tyriar]

@FeaRCODE RE your comment on https://github.com/Microsoft/vscode/pull/3200#issuecomment-218669706 (which won't be read by many people as its closed).

@Tyriar I agree. I am not sure how they went about their research, but a monotone list of names is hard to look at when I have a ton of files. Also, his comment on "multi-colored" distracting icons is false. As pictured here, these icon DRASTICALLY improve the speed at which i can find my folder/files. https://github.com/Microsoft/vscode/issues/211#issuecomment-210210437

I think that themes should also control what the icons look like and i do agree there should be an option to disable them.

I'm not that big on differentiating folders and files personally, as the expand/collapse arrows accomplish that currently. I want it on a file type basis so that it's easier to tell what file type files are, plus it will make the editor more attractive (subjective of course).

[HunterMitchell]

@Tyriar I guess you're right. For some reason my mind can process the icons faster. I prefer them regardless :)

[skol-pro]

I know this is only "half-related" but is there a way to alter the file viewer using the vsCode API ? What I'd like to do is add the folder behavior to .ts files, so that we can expand it from the viewer and see .js version. Any one any idea ? :)

[marzubov]

Hello.

I know that 6 months ago icons weren't in vscode planning list. And I know that initially you wanted to keep workbench very simple. As you can see here, many people like icons which help them to process files faster.

In update 1.1 you introduced Visual design proposal which modifies workbench and editor. It will be nice to hear if vscode team reviewed possibility to add icons.

@bpasero any thoughts?

[bpasero]

@marzubov we did not have a chance to talk about this feature request with the UX team. as you can understand, tabs are currently our #1 priority and gets our full attention. this might keep us busy for another few sprints because there are related follow up work items (empty layouts, horizontal split, etc.).

[marzubov]

@bpasero ok, got it. Thanks for such a quick response. Keep us in touch.

[sbowler]

At the very least you should be able to have different icons for different file extensions I believe. Ideally it might be nice to support some sort of regex matching so you could have custom icons for Angular Javascript files named with -controller.js for example.

I for one would rather have this then tabs and it seems like a lot less work for at least some basic start to be implemented.

[CristyTarantino]

+1

[nelsonlaquet]

Yeah, I'm not sure why so many people are complaining about tabs, which are a major UI overhaul and virtually unnecessary (with most of the reasons being "because every other editor has them")... Icons are a much easier thing to implement and have a considerably higher return on investment in regards to usability.

[vothanhdat]

Thanks you for @equinusocio . From your totural, i have an some modify in file workbench.main.js and workbench.main.css for my web project.

First, open file workbench.main.js, find string text-file-icon, and we will see an function :

t.prototype.iconClass=function(e){return e.isDirectory?"folder-icon":"text-file-icon"}

and we need modify it to return and class name for each file type. Here is my modify :

t.prototype.iconClass=function(e){
    if (e.isDirectory)
        return 'folder-icon';
    var type = e.substring(e.lastIndexOf('.') + 1).toLowerCase();
    switch (type) {
        case 'js':
        case 'jsx':
        case 'css':
        case 'scss':
        case 'md':
        case 'json':
        case 'html':
        case 'htm':
            return type + '-file-icon';
        default:
            return 'text-file-icon';
    }
}

Then we just add some line css in file workbench.main.css and download some icon ...

Here is my screenshort :