I use this plugin https://github.com/robertohuertasm/vscode-icons
It changes the icon of the files which is nice. I want to give an icon to a specific folder. Like a different icon to the folder which has all CSS files. I know icon of .css and CSS folder should not be the same so I want to have different icons for file and folder. The same I would like to have for javascript folder.
Not sure it's possible or not, though.
I just installed the vscode-extensions icon from the extension management panel in vscode and it already DOES have different icons for folders called CSS and .css files.
If you want to add your custom icons, there is currently no easy way to do this. Writing about per-rule theme overrides, #aeschli wrote that the team "currently has no plans to do this"
You can, however, fork whichever theme you like and add the custom mappings yourself and/or make a pull request against the original theme. The api describes in detail what to do, but in summary you would associate a folder name with an icon name and that icon name with an actual icon by modifying icons.json:
"iconDefinitions": {
"_my_folder": {
"iconPath": "./images/My_Folder_16x_.svg"
}
},
"folderNames": {
".vscode": "_my_folder",
},
Related
I have searched but can't find anything or don't know how to find this. Is there an existing flutter package that has icons for common file types? If I'm displaying a file list, I'd like to show associated icons for those files such as .txt, .exe, .jpg, and just about anything else you'd find on a desktop computer, if possible.
It may not be possible to get the actual associated icon. For instance, a .jpg could be associated with multiple apps but I'd be fine with just a generic .jpg file icon for this or any other file type. I just don't want to show the same material icon for every file.
Try this,
https://pub.dev/packages/file_icon
Please note that the package is not maintained.
While using VS Code in larger projects, I have trouble seeing which file and folder I have open.
My current explorer looks like this:
I can see a selected folder, but that quickly becomes difficult to see when I am in a project with hundreds of folders and/or files.
I'd like the selected folder to look like this. (Purely to illustrate this I've selected all the files in the current folder)
But with the open file highlighted somehow.
Is it possible to theme the explorer view in this way?
How can I configure the Material Icon Theme to use default icons for some folders in VS Code?
E.g. I have a folder named trigger and that folder has an unusual icon. I would like to have a default icon for the trigger folder, just as it is for the sibling shoot folder.
I read through the features of the Material Icon Theme inside the VS Code documentation, but was not able to find a way to achieve what I want.
I mean this extension.
Also, I was able to disable all speicific icons styling by using the Material Icons: Change Folder Theme command. But I want to disable only for a specific folder, or at least for a specific folder name (trigger in my case).
Just declare in your settings.json file:
"material-icon-theme.folders.associations": {
"trigger": ""
},
In the settings of the extension there's a option to set the icons of the folders. By default it's set on "specific", you need to set it on "classic".
Screenshot
I've created a language extension (syntax highlighting, etc) and now want to associated a specific icon with the language (or files with the extensions specified in my extension).
I noticed an "icon" property is available in the package.json file, and tried to bind this property to my .svg file. But while syntax highlighting works just fine on a test file, I don't see my custom icon associated with this file.
Where do I add a reference to my .svg file? Do I have to somehow contribute my .svg file to the Seti File Icon Theme?
In vscode v1.64:
Language default icons
Language contributors can define an icon for the language.
"contributes": {
"languages": [
{
"id": "latex",
// ...
"icon": {
"light": "./icons/latex-light.png",
"dark": "./icons/latex-dark.png"
}
}
]
The icon is shown if the current file icon theme only has a generic file icon for the language.
File icon themes like Minimal or None that do not show file icons also
will not use the language icon. Also, if a file icon theme has an icon
for an extension or file name, these will be preferred.
File icon themes can customize the new behavior by defining
showLanguageModeIcons: true|false in the theme file.
showLanguageModeIcons: true shows the default language icons even if
the theme does not specify a file icon
showLanguageModeIcons: false prevents that default language icons are used.
https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_64.md#language-default-icons
File and folder icons are defined in icon sets, the default set being Seti. There is indeed currently no way to re-define those icons in an extension, short of creating your own icon theme. The Seti UI icons are generated from a dependency to the main repo and shipped as a built-in extension.
Therefore, your best bet to get your syntax icon included in VScode is submitting a pull request to the Seti UI repository. At some point, the new icons will be rolled into an icon font by the VScode developers and your icons should appear.
!!
UPDATED: see other comments to proper answer
There is newer version of vscode. So no need for this 'hack' anymore.
!!
Unfortunately you have to specify whole theme icon specification in current version of vscode.
There is PR on github that should allow extend default icons: Support extending icon themes
Before it will be merged and included into new version there is possibility to copy default seti configuration
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/seti.woff
https://github.com/microsoft/vscode/blob/master/extensions/theme-seti/icons/vs-seti-icon-theme.json
and add your own icon into vs-seti-icon-theme.json config according doc File Icon Theme
currently in jstree, default icon is folder icon. How to set a new icon as default icon in jstree?
Add the types plugin to the jstree and in types set the default icon in the default property:
"plugins": ["types"]
"types": {
"default: {
"icon": //new default icon here
}
}
You can use the types plugin as the other answer suggests. What I usually do however, to just replace these two files for a quicker solution:
32px.png
40px.png
Of course, the caveat is that this will change ALL icons from the new theme, not just the folder icon. These files are usually located in your same folder as your jstree.min.css file. The new icon is found bundled along with css in your themes folder. jstree actually embeds one of these two pngs (depending on the responsive state) on the displayed tree view.