How to change "dots" folder icon in sidebar?

[AnthonyGress]

I would like the folders to be folder icons in the side bar instead of the default which is the filled in dot for closed directory and the outlined dot for an open folder. How can i do this?

[PKief]

Hi, right now it cannot be changed by setting. You're right, this should be customizable, too. I've it on my list to implement it in the future!

[brendan8c]

This has already been implemented, the topic can be closed.

[PKief]

It's regarding workspace folder icons and not the normal folder icons inside of a workspace. Your image only shows folders of your single workspace.

Could you please add another project to your workspace like this?

The problem is that you cannot change the icon of these root folders via settings.

[brendan8c]

Look at, did you mean it?
Workspace root folders
I made two svg icons for them with open and closed folder views.

[PKief]

Yes this is what I meant 😃 But you directly changed the SVG icons, right? If this is the case the next update will override the icon to the default icon of the extension. I think the best scenario would be that it can be changed via user settings.

[brendan8c]

With every new update of vs code nothing will change! )
I'm directly changing the styles of the editor.
My changes are written in a single file that imports the settings in vs code., includes all the icons and my custom styles.

My custom.css

/* Open root folder icon */
.show-file-icons
	.monaco-tl-twistie.collapsible:not(.collapsed)
	+ .monaco-tl-contents
	.rootfolder-icon::before {
	background-image: url('vscode-file://vscode-app/c:/Users/Brendan8c/Documents/root-1.svg');
}
/* Closed Root Folder Icon */
.show-file-icons .rootfolder-icon::before {
	background-image: url('vscode-file://vscode-app/c:/Users/Brendan8c/Documents/root-0.svg');
}

My settings.json

{
	//#2pur Plugin Custom CSS and JS Loader - creates custom styles. Connected via custom.css file
	//#1orange Enable Custom CSS and JS –To include styles
	//#1orange Disable Custom CSS and JS –To disable styles
	//#1orange Reload Custom CSS and JS –Disable and re-enable "restart"

	"vscode_custom_css.imports": [
		"file:///C:/Users/Brendan8c/Documents/custom.css"
	],
}

[PKief]

Ah okay, haven't heard about this solution yet. I have to try it out how this is working. From the first point of view it seems a bit hacky but maybe it can be a solution for this issue. As this extension also provides an API that can replace some of the icons of this extension directly, I'd prefer to extend this API to allow users to change the workspace folder icons as well. So then it wouldn't be necessary to write some custom css files 😅