Broken SVG Icon/Buttons on Latest Version of VS Code (v.1.56)

[SolarTheory]

The latest version of VS Code (v.1.56.0) seems to have broken the Shortcut Menu Bar icons / buttons. Upon reverting to a previous version of VS code, the issue went away. Not sure if this is something that you need to fix on your end or if it's a VS Code bug, but I thought you should be aware:

VS Code Version:

[GorvGoyl]

thanks for informing, yes, it seems to be an issue from VSCode side. I've added the bug report https://github.com/microsoft/vscode/issues/123118. Request others to please vote there for visibility.

[dulkith]

same issue

[RudraAsthana]

Then working with an old version might be the fix?

[GorvGoyl]

yes for now, vscode will release a new update soon

[SolarTheory]

The problem is that the svg icons are 512x512, which is not in conformity with VS Code's "official" spec. The official documentation specifies icon sizes of 16x16. For whatever reason this official spec was never enforced. The new VS Code release inadvertently enforces it.

Long story short, due to complaints, Microsoft will be releasing a fix. I have both VS Code stable and Insiders installed on my system, and it has been fixed in the latest version of VS Code Insiders.

It may not be coming to the stable release immediately though. Perhaps next month? Not sure.

If you want immediate fix, resize the SVG icons you use to 16x16. The icons are located in the "images" subdirectory of Shortcut Menu Bar's extension folder (in .vscode\extensions).

[GorvGoyl]

The problem is that the svg icons are 512x512, which is not in conformity with VS Code's "official" spec. The official documentation specifies icon sizes of 16x16. For whatever reason this official spec was never enforced. The new VS Code release inadvertently enforces it.

Long story short, due to complaints, Microsoft will be releasing a fix. I have both VS Code stable and Insiders installed on my system, and it has been fixed in the latest version of VS Code Insiders.

It may not be coming to the stable release immediately though. Perhaps next month? Not sure.

If you want immediate fix, resize the SVG icons you use to 16x16. The icons are located in the "images" subdirectory of Shortcut Menu Bar's extension folder (in .vscode\extensions).

could you point me to the documentation that says to use 16x16 svg?

[michelsciortino]

could you point me to the documentation that says to use 16x16 svg?

https://code.visualstudio.com/api/references/contribution-points#Command-icon-specifications

[GitMensch]

could you point me to the documentation that says to use 16x16 svg?

It is in the contribution points docs and was added with https://github.com/microsoft/vscode-docs/commit/64d884e73da3c9562f6131ac09ed39cfd86e8b50, committed on 23 Oct 2019 (after the initial icons were added) to this extensions as follows:

Icons should be 16x16 with a 1 pixel padding (image is 14x14) and centered.

It may be reasonable to rescale and check the padding (and obviously not that hard), even if VSCode Insiders applied the workaround of using a 16px background that the images are out in with https://github.com/microsoft/vscode/commit/2c4f3cb9a5400a5f649fdbf642f3877be52c7183.

[SolarTheory]

could you point me to the documentation that says to use 16x16 svg?

michelsciortino and GitMensch beat me to it. For context, it is mentioned by a VS Code team member in Issue 123041. That's where I first saw it while researching the bug.

Since I only turn on a few SMB icons, and I wanted to get rid of the eyesore, I resized and replaced the few I use for the temporary fix, while we wait for the workaround to be pushed to the stable channel.

[GorvGoyl]

Alright I'm fixing it

[GorvGoyl]

Fixed. restart VSCode and update shortcut menu bar extension.

[jskim82]

The command icon is shown below

[GitMensch]

I'm quite sure this is fixed now, can we close and unpin it?

[SolarTheory]

Oops. Sorry, I forgot!