I have a VSCode extension that has worked for over a year. This extension displays a TreeView and I make use of the Material Icon Theme package. I simply want to display an icon for Folders and Files - nothing particularly fancy.
My code simply contains this :
this.iconPath = new vscode.ThemeIcon("folder");
This has worked fine for well over the past year. The only change is to regular VSCode installs of new releases as they become available.
However, now the icons that are now being displayed in the tree appear to be the codicon icons for each of folder and file and not the icons from Material Icon Theme.
VSCode itself is using the Material Icons theme - but my Treeview extension is no longer displaying the Material Icons for folders and files.
I added these 2 lines to show that the Material Icon theme is active.
const config = vscode.workspace.getConfiguration();
console.log(config.workbench.iconTheme); // Correctly displays => material-icon-theme
In the past simply specifying
this.iconPath = new vscode.ThemeIcon("folder");
was sufficient to get the the theme icon to be presented.
I have searched recent VSCode documentation to see if something has changed in this area but I find nothing.
Can anybody offer any suggestions as to what may have changed?
Related
I'm creating a large scope theme in Huawei Theme Studio and I'm unable to add third-party icons that I would like to customize.
In the Theme Studio, I am in Icon -> Third-Party Icon and Custom.
In the icon folder which is located in ThemeStudio -> workspace -> mytheme -> icons I tried to add for example: com.instagram.android.png, com.amazon.aa.png, com.android.chrome.png, etc.
Unfortunately, none of them showed up in Theme Studio. I'm attaching a screenshot of the message I got when I was trying to upload them.
Next, I tried to upload icons from Huawei, which the large scope theme does not include. These were com.huawei.gameassistant.png and com.huawei.vdrive.png, and these two appeared in the third-party icons.
Am I doing something wrong, or Huawei doesn't support most third-party icons?
According to the doc, If a theme is designed for phones running EMUI 10.0 or later, its preview images cannot contain the 21 icons below, or content related to GMS such as Google Search. Therefore, you do not need to create these images.
The February 2021 version brought a breaking change for the colors of autocomplete lists:
https://code.visualstudio.com/updates/v1_54#_updated-listtree-ui
Where we have the following settings for the colors of the focused item:
quickInputList.focusIconForeground
quickInputList.focusForeground
quickInputList.focusBackground
The three work fine.
However, when setting focusIconForeground, it seems that we can override the color of the icon... but what if I want to keep the original color of the icon, even when the item is focused?
For example, suppose I have the following settings:
"workbench.colorCustomizations": {
"[Default Light+]": {
"quickInputList.focusIconForeground": "#ff0000",
"quickInputList.focusForeground": "#000000",
"quickInputList.focusBackground": "#e0e0e0",
},
},
If so, this is the rendered autocomplete list:
See how the icon of the focused item is red. I want it to remain purple, its original color.
So, what setting can I use in quickInputList.focusIconForeground to keep the icon at its original color?
As a side note... I'm using "Default Light+" theme, but I noticed that many other themes (like "Quiet Light" and "Monokai") do exactly what I'm trying to do.
I had to dig into the actual source code of VSCode in order to find this. What happen is: the suggestion box icon is called product icon, which is actually a glyph icon font that can be themed. It ships with no color, because the color is defined by the active color theme.
When the suggestion box is rendered, VSCode checks if current theme has defined a color to the icon. If there is no color, a default color is given according to the icon type. However, if the color theme defined a color to the icon, this color is used, regardless of the icon type – that is, the theme overrides the color. The parameter for this color is editorSuggestWidget.selectedIconForeground, as noted in JayDev's answer. The code which does this can be seen here.
Now the theme I'm using, "Default Light+", does override this color, and there is no way to clear this overriding in VSCode settings file. Other themes do not override, and those themes show the original icon color, which is the behavior I want. So, what I had to do was simply modify the theme, inside VSCode installation folder, commenting out the offending line, which can be found here. For reference, in VSCode installation folder, it's line 28 of this file:
resources\app\extensions\theme-defaults\themes\light_vs.json
The line itself to be commented out is:
"list.activeSelectionIconForeground": "#FFF"
Another solution would simply be to create another theme, based off "Default Light+", with this fix. However, if the theme is updated in the future, I'd have to keep the pace, something I don't want to do. So, what I'm doing is adding this fix to this patch I wrote a while ago to automate other VSCode customizations.
Note: All source code references were taken off VSCode commit da77887 (June 10, 2021). These references may, obviously, change in the future.
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 use VScode extension Material Icon for give folder icons but lately it's not rendering properly for certains folders even if there are in the icon library
here is the image of the folder with the icon:
and as you can see that the folder Icon is exist on the library
as some of the solutions was to edit material icons setting to target react-redux active icon pack
still not working well
You probably have overridden the association in the settings. As for the documentation of Material Icons Theme, it's a bit confusing and incomplete, so this is a workaround, add this to settings.json
"material-icon-theme.folders.associations": {
"firebase": "firebase"
}
Hope it helps.
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