Vscode-material-icon-theme: Custom SVG icon setting appends random number to the end makes it not found

Created on 2 Sep 2020  Â·  3Comments  Â·  Source: PKief/vscode-material-icon-theme

This is how my structure looks and svg icon located:

.vscode
 ┣ extensions
 â”— icons
   â”— my_icon.svg

In the settings.json the icon can be associated to a file name or file extension like this:

"material-icon-theme.files.associations": {
    "my.yml": "../../../icons/my_icon"
}

However, In console I get following error:

GET file:///C:/Users/gence/.vscode/icons/my_icon~185020693.svg net::ERR_FILE_NOT_FOUND

As you can see instead of my_icon.svg it says my_icon~185020693.svg. And this number changes on every reload/save.

And file icon becomes empty.

bug

Most helpful comment

Thank you, yes it currently affects all settings which produce some changes to the SVG icons itself.

A workaround is to remove all settings that change the SVG icon:

  • material-icon-theme.folders.color
  • material-icon-theme.saturation
  • material-icon-theme.opactiy

The root cause for adding the numbers after the icon name is that it triggers the automatic reload of all icons when e.g. their color has been changed. One solution would be to append these numbers to the custom icons, too. The other solution would be to simply ignore custom icons. I will investigate a solution soon.

All 3 comments

Oh, could you please post your other settings for the material icon theme? It might be if you set the opacity or saturation of an icon to something else than the default value then it could break the ability to add custom SVG files 😳

@PKief Exactly! I use that settings. Let me show you full settings:

    ...
    "workbench.iconTheme": "material-icon-theme",
    "material-icon-theme.activeIconPack": "react_redux",
    "material-icon-theme.folders.color": "#ff7043",
    "material-icon-theme.hidesExplorerArrows": false,
    "material-icon-theme.saturation": 1,
    "material-icon-theme.files.associations": {
        "my.yml": "../../../icons/my_icon"
    },
    ...

However, I've removed saturation and still not worked out.

EDIT: It seems also folders.color affects that too. It now works without folders.color and saturation

How can we get around this together with those options?

Thank you, yes it currently affects all settings which produce some changes to the SVG icons itself.

A workaround is to remove all settings that change the SVG icon:

  • material-icon-theme.folders.color
  • material-icon-theme.saturation
  • material-icon-theme.opactiy

The root cause for adding the numbers after the icon name is that it triggers the automatic reload of all icons when e.g. their color has been changed. One solution would be to append these numbers to the custom icons, too. The other solution would be to simply ignore custom icons. I will investigate a solution soon.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anxorl picture anxorl  Â·  3Comments

usama-asfar picture usama-asfar  Â·  5Comments

SMotaal picture SMotaal  Â·  4Comments

niksudan picture niksudan  Â·  3Comments

simlej picture simlej  Â·  3Comments