pkief / vscode-material-product-icons

Product Icon Theme with Material Icons for VS Code

Material Product Icons

Get the Material Design icons into your VS Code.

     

Preview

This extension replaces the VS Code default icons with the Material Design icons:

How to activate

The product icons can be activated via command palette:

or user settings:

"workbench.productIconTheme": "material-product-icons"

Icon set

Icon sources

• Google Icons
• Material Design Icons

You want to contribute?

Take a look at the contribution guidelines and open a new issue or pull request on GitHub.

vscode-material-product-icons's Issues

New Icon Set

I am a big fan of the old VSCode icons, I really like them a lot. So, my request to you is that can you create another icon theme for those? When I got the Material ones, I saw the VSCode Icons 1.0 there, but I do not know how to get those icons on my computer.
Hope you make a new theme for those.
Thanks in advance

[Request] - Distinguish between functions and methods

like this product icon

[Issue] Installing on Code-Server

Hey,

I really enjoy this icons and I tried to install it in my code-server but I couldn't find it in the store, then I tried to install the .vsix manually and it said that the wasn't compatible with the vscode version.

Code-Server version:

code-server: v3.9.0
 VS Code: v1.52.1
Commit: fc6d123da59a4e5a675ac8e080f66e032ba01a1b
Date: 2021-02-12T23:39:50Z
Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.192 Safari/537.36

Thanks,
MiguelNdeCarvalho

"Source Control" and "Run and Debug" Icons differ significantly from the original Codicons

I'm aware that this might be intended, but both the "Source Control" as well as the "Run and Debug" icons differ so much from the original, that I think it might be confusing for users. Especially the new "Source Control" icon is extremely similar to GitLens "File History" which I actually use in it's own Action Bar tab.

• "Source Control": Original , New
• "Run and Debug": Original , New

I believe that changing these icons to be more in line with the original icons will ease the transition to the (admittedly better looking) material icons, especially for longtime users of vscode.

Change disconnect/stop icon from reset

This Icon doesn't make sense especially when the reset is sitting right next to it:

probably also switch the sync vs refresh icons on source control tab:

Add custom icons for extensions

It's possible to override the default extension icon of a extension in the activity bar?

[Suggestion] Make Debug View More Consistent

Currently the icon for "debug current file" is a rocket as below.

Maybe changing it to the below icon is more consistent.

Change "Clone Git Repo" Icon

Currently the "Clone Git Repo" icon on the "Get Started" page is a clock as shown below. Maybe changing it to something related to git is better?

Issue with icon in branch selection dropdown

codicon-debug-disconnect

Publish to open-vsx.org

Have you considered publishing your extensions to open-vsx.org? Users of VSCodium and other open source VSCode based editors would love to be able to use your themes and icon packs.
https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

Codespaces - cannot install material product icons extension

When trying to install the Material Product Icon theme

VS Code tells me that this is not supported in this context. Notice that the extension details editor has the label 'install locally'.

It seems this extensions is tagged as strict ui kind and hence it cannot be installed in web.

"extensionKind": [
		"ui"
]

Please change it to

"extensionKind": [
		"ui",
                "workspace"
]

or remove the entry completely so that VS Code can infer it smartly.

Suggestions

Hey, can you add some product icons for the gitlens and project manager extensions? These are pretty popular, and they are not as soft as your product icons so they don't fit well. Thanks for the awesome product, again! These icons are as great as the file icons u made that I use

Icon in Debug View is Missing

The little icon before the line number, which indicates the running statement, is missing.

The below screenshot is taken when using VSCode's default product icon.

The below screenshot is taken when using our product icon.

Compact menuBarVisibility's icon doesn't exist/appear.

"window.menuBarVisibility": "compact"

Preview Icon

In my opinion this "Markdown Preview" looks kinda strange..

How about this preview Icon. I honestly think it would make a really good fit.

Strange icons in the "View" menu

Hi!
In the last version, I see strange icons. They are located in the "View" menu.

Thank you for your wonderful work!

Extension version: 1.1.2
VS Code version: 1.64.0

Improve Icons in Intaglio

Currently the hollow part of the icons in intaglio seems too thin as shown below. Maybe making the hollow part a bit thicker is better?

Icon in Debug View is Missing (2)

The icon indicating the active executing breakpoint is missing (compare the first image of each subsection below).

The below screenshot is taken when using VSCode's default product icon.

The below screenshot is taken when using our product icon.

Live Share Icon?

I'm not sure where to leave icon suggestions. But I was wondering if it would be possible to make an icon for the Live Share extension

Arrow icon in search box on primary side bar points right instead of down.

• VS Code Version: 1.61.0
• vscode-material-product-icons version 1.5.0

Steps to Reproduce:

1. Open VS Code.
2. Install and set icon theme to vscode-material-product-icons.
3. Make sure the primary side bar is visible.
4. Click on the search box in the primary side bar.
5. Notice the arrow icon on the right side of the search box.

Expected Behavior:

The arrow icon should point downwards, indicating the option to show the replace input field.

Actual Behavior:

The arrow icon appears as a thin arrow pointing to the right, instead of pointing downwards.

Screenshots:

Additional Information:

• This issue is specific to the search functionality in the primary side bar.
• It does not occur when the vscode-material-product-icons extension is disabled.

Although this is a minor bug, it affects the visual consistency of the theme. I am reporting this issue and also providing a simple fix for the problem.

Not working on GitHub codespace

Now you can open any repository in codespace using . key shortcut. See https://twitter.com/github/status/1425505817827151872?s=20

When my setting is synced by signing in this extension is activated but still, all icons are missing. Any opportunity to get this extension working in codespace?

Unintuitive icons for jupter cell toolbar

Here are icons from the default product theme:

the first two of them means "run cells above" and "run cells below", which is quite obvious.

This is the same toolbar, but with material icon theme:

this icons are not so obvious and can be interpreted as "move cell up" and "move cell down". Can they be replaced with more clear ones?

[Suggestion] Option to use new "Material Symbols"

Hello,

I really think that using the new "Material Symbols" introduced by Google on April 19, 2022 really makes it better by giving a much more modern look and similar to the default "Codicon" icons.

To give you an idea of what it looks like, I made a modification of the extension font using a weight of 300 and the "Noto Emoji" font (from Google) when I couldn't find an icon that fit well.
Some icons are not very suitable but this is a first version to get an idea.
Here is the result:

Material Icons

Material Symbols

You can also test by yourself in your VSCode by replacing the material-icons.woff file by the one below. This is not the one you can see in the screenshot above but another one scaled to have proportions more similar to the default icons.
material-icons.zip

It would be really great if we could have the option to select these icons ! 😀

Change SCM Sync Icon

Currently the "sync" icon (yellow) is almost the same as the "refresh" icon (green) as shown below.

Maybe making the "sync" icon similar to the default one (shown below) is better?

Contributing.md incomplete sentence

Check the quality of the contribution guidelines.

Restart and Disconnect debuggin use the same icon

Hi,
I see that the 'Restart' and 'Disconnect' buttons are using the same icon.
Could you please add an icon for 'Disconnect' button?

Thank you and best regards.

Extension version: 1.1.1
VS Code version: 1.61.2