Built a visual browser for VSCode Material Icon Theme icons

[aqz236]

Got tired of guessing icon names when configuring VSCode themes, so I made this simple browser.

Shows all Material Icon Theme icons in a searchable grid. Click any icon to copy the actual string you need - like "rust" instead of "folder-rust". Also filters by file vs folder icons.

Live version: https://vscode-material-icon-preview.vercel.app/

Source: https://github.com/aqz236/vscode-material-icon-preview

Built with React + TanStack Router. The project includes the original Material Icon Theme source, so icons stay up to date.

Probably useful if you're customizing file associations or just want to see what icons are available.

[PKief]

Hi @aqz236, thank you for sharing your project!

While reviewing your work, I noticed a few areas that might benefit from some improvements. I wanted to mention that we already provide all icons, as well as an API for generating the latest manifest, via our npm package. Integrating this package could help streamline updates for your project and ensure all icons are included correctly. Currently, some icons—such as those for "svelte"—are missing from your repository's icons folder. These icons are not checked into the vscode-material-icon-theme repository itself, but are generated with each new release and included with the npm module.

For reference, here's a screenshot where certain icons are not being displayed as expected:

Additionally, it would be a great improvement to showcase the icons on both light and dark backgrounds, since their appearance can vary depending on the theme. This is just a minor feature suggestion, but I believe it could be helpful for others.

Once again, thank you for your work on this project. Please feel free to let us know if you would like further feedback or if you have any questions about integrating the npm package. Looking forward to seeing future updates!

[aqz236]

Hi @PKief ,

Thank you so much for the detailed feedback and suggestions! You're absolutely right about using the npm package - I've already implemented the changes you mentioned:

✅ Updated to use npm package: The project now pulls icons directly from the official @vscode-material-icon-theme package, so no more missing icons like Svelte.

✅ Light/dark theme preview: Icons that have light versions now include a toggle button to switch between dark and light variants, so users can see how they'll look in different themes.

The missing icons issue you spotted was exactly what prompted me to refactor - much cleaner now with the official package as the source of truth.

I'm planning to set up a GitHub Action next to automatically sync with new npm releases, and I'll keep maintaining this project.

Really appreciate you taking the time to review the project and provide such constructive feedback. The Material Icon Theme has been such a game-changer for developer experience, and I'm happy to contribute something that helps people discover and use these beautiful icons more easily.

Thanks again for all your work maintaining this incredible icon collection!

---

Live version: https://vscode-material-icon-preview.vercel.app/

Source: https://github.com/aqz236/vscode-material-icon-preview

[aqz236]

Added a color matching filter, allowing users to select their preferred color and quickly locate the desired icon.

[PKief]

@aqz236 Thanks it looks really nice! I just found a tiny issue. It seems that all folder icons have the id starting with "angular". And when you search for the term "angular" you'll get all icons as a result:

https://github.com/aqz236/vscode-material-icon-preview/blob/f7fc69672ab31b25b35dec843df25ed5c0663208/public/meta/icons.json#L17

Would you mind checking where the problem is here? :)

[aqz236]

@PKief

Thanks for spotting that! You're absolutely right - that was a nasty bug in the icon generator.

I just fixed it by changing how the generator handles different icon packs.

Your catch was super valuable - not only did it fix the search issue, but it also brought back a bunch of file extension icons that were missing before (like windicss, stylable, etc.).

[030201xz]

So useful!