material-theme / vsc-material-theme-icons

Material Theme Icons, the most epic icons theme for Visual Studio Code and Material Theme.

---

Table of contents

The most epic file icon theme for Visual Studio Code. This icon theme is made to be used with Material Theme for Vscode for an immersive experience.

• Getting started
  • Installation
  • Activate theme
  • Fix File Icons

Getting started

You can install this awesome icon pack through the Visual Studio Code Marketplace.

Installation

Launch Quick Open:

• Linux Ctrl+P
• macOS ⌘P
• Windows Ctrl+P

Paste the following command and press Enter:

ext install material theme icons

And pick the one by Mattia Astorino (me) as author.

Activate theme

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type icon theme, choose Preferences: File Icon Theme, and select one of the Material Theme Icons variants from the list. After activation, the icons will appear in your explorer sidebar.

Fix File Icons

If you notice that the folder icons do not match the active Material Theme variant, you can fix it with just a command.

Launch Quick Open:

• Linux Ctrl + Shift + P
• macOS ⌘ + Shift + P
• Windows Ctrl + Shift + P

Type material theme icons and select Material Theme Icons: Fix icons accent. Based on Material Theme from the drop-down menu. This command will set the correct icon theme based on your active Material Theme variant (if present).

---

Copyright © 2019 Mattia Astorino & Alessio Occhipinti

vsc-material-theme-icons's Issues

Fix compile script

Issue

This is related to the "compile": "tsc -p ./" script that doesn't regenerate all the folders inside out after the cleanup.

Unable to activate

After restarting code, file icons suddenly missing.
When I tried to fix the icon accent and re-activate it again, there's this error:

Unable to read file (Error: File not found (/Users/herlambang/.vscode/extensions/equinusocio.vsc-material-theme-icons-1.0.0/out/variants/Material-Theme-Icons-Darker.json))

I've tried disabling and reinstalling the extensions, and can't find any solution yet

TEMP FIX - (EDIT BY AUTHOR)
As temp fix, download this zip extract it, and move the equinusocio.vsc-material-theme-icons-1.0.0 folder inside your extension folder. Make sure to delete other versions if present. Reload.

equinusocio.vsc-material-theme-icons-1.0.0.zip

Pop-up everytime I open vscode with Remote-WSL

I am connecting vscode to WSL using the Remote-WSL extension. Every time I open a new instance of vscode I get a pop-up saying "Thank you for using Material Theme Icons! Install also the Material Theme for a more immersive experience." I can then select either "Sure!" or "Nope". If I select "Sure!" I am taken to the Material Theme extension page which recognizes that is indeed already installed.

When I connected to WSL, the Material Theme Icons was disabled locally and enabled on the remote. This was not the case with the Material Theme extension. Is this why Material Themes Icon is not recognizing that Material Theme is installed? Is there a way I can disable this notification?

Duplicated icon themes

Duplicated icon themes when Material Theme Icons and Material Theme <=2.6.3 (pre icons) are both installed.

[Icon Request] - .next.config.js file

It would be a pleasure if you could add the Next.js icon for .next.config.js and .next.config.mjs files. As Next.js is one or rather the most famous React Framework, the number of the people using it increases daily.

You can find the brand here:
https://vercel.com/design/brands#next-js

Unable to read file

Hey 👋

After I updated the extension to its latest version (1.2.1) I started to notice that some icons were not being loaded, so I performed a clean installation of the extension and now I'm getting this error:

I installed the previous version (1.2.0) and everything is working as it should...

Add icon for Nunjucks

Hi, I'm editing .njk files.

Some information about the file extension: mozilla/nunjucks#398

I'm watching a course and the instructor has this:

Thank you!

Webpack icon for ts config files OR user icon customization settings option

Webpack configuration files can be written in several languages, including typescript, but the typescript icon does not show up on filenames like: webpack.ts, webpack.config.ts, etc.

Is it, or could it be possible to set these as regexps in src/icons/partials/fileNames.js?
Either way, I'd like to request that the ts file names be added.

Alternatively, it would be great if there were a general solution in the form of a user settings option, something like:

"materialTheme.iconsForFileNames": { "webpack.config.ts": "_file_webpack", ...}

Allowing regexps in filename position would be a cherry on top.

tailwind config icon

The name of the file is tailwind.config.js.

SVG mark
Brand Statement

tests icon file support

it would be interesting to use specific icons for test files.

It could be used in files with nomenclatures such as:

• .spec. *
• .test. *

Example:

name-component.test.jsx

Attached is an SVG icon that could be used.

for js:
https://github.com/PKief/vscode-material-icon-theme/blob/master/icons/test-js.svg

for jsx:
https://github.com/PKief/vscode-material-icon-theme/blob/master/icons/test-jsx.svg

for ts:
https://github.com/PKief/vscode-material-icon-theme/blob/master/icons/test-ts.svg

Or you could use one of them for all test files regardless of language.

Fix icons accent command reset icons variants

The fix accent icons reset the icons variant and doesn't fix the accent color.

Missing module when running Fix icons

This is the error message:

Cannot find module '/Users/mattia.astorino/.vscode-insiders/extensions/equinusocio.vsc-material-theme-icons-0.9.6/src/defaults.json'

Add icon for vs code rest client

Hello,
there's no icon for .rest files

Support new file nesting feature

Since the January release, vscode has an experimental feature to support file nesting, which is a way to scope some related files together.

By default, nested files are expanded and work great with this icon theme (after all, it's just a changed level of indentation):

Unfolded parent at startup	Unfolded parent at startup (Minimal theme)

Problem is, since Material Theme Icons do not display folding indicators, as soon as you fold everything back (with the "Collapse Folders in Explorer" button for instance, which I use extensively each time I'm done working with a given set of files), it seems impossible right now to expand back the files that contain such nested children (apart from using the keyboard), as there are no visual toggles to do so, and clicking on the file does not re-expand its children:

Folded parent	Folded parent (Minimal theme)

It is also quite confusing, visually speaking, because we're not able to know at a glance whether a file has children nested files or not, as there are no visual cues whatsoever.

I'm wondering what could be done to fix both those problems?

getaddrinfo ENOTFOUND connct

We have written the needed data into your clipboard because it was too large to send. Please paste.

Settings not available in command palette

I installed the Material Theme Icons extension (but not Material Theme) and enabled one of the icon themes (Light). Icons have also updated on the sidebar. But I can't find any settings in the command palette as mentioned in the README.md. (screenshot below)

Perhaps, it is not adding in the settings.

[Java] Icons for different file type (abstract, Class, Interface, Enum)

For the .java extension, it would be nice if the Icon would indicate the type of .java file.
This would include:

• class
• enum
• interface
• abstract class

Doesn't seem to map file extensions with custom file associations setting

In my project's .vscode/setting.json

  "files.associations": {
    ".env.analyze": "dotenv",
  },

I'm seeing only the default file icon (blue borderlines of a file)... Should this work out of the box or is this supported?

DVC icon support

Add an icon for .dvc files.
Sample icon: https://i.imgur.com/YGWWPii.png

Original logo can be obtained from dvc-public aws s3 bucket following command
dvc get https://github.com/iterative/dataset-registry images/dvc-logo-outlines.png
(see https://github.com/iterative)
Linked issue in vscode-icons repo

Icon for Terraform files

Thanks for this great theme and all the hard work you put into it!

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Would love to see an icon for Terraform (.tf) files

Describe alternatives you've considered
N/A

Additional context

Add file icon for Jupyter/Ipython

Can we have file icons for Jupyter Notebooks with .ipynb file extension?

.nvmrc file icon

Add nvmrc (node) file icon

Stop notification "install ... for a more immersive experience"

Describe the bug

This notification keeps showing every time I close & reopen VS Code, each time I simply close a workspace (note VS Code itself is not closed, just the workspace), of course despite the fact I click any of the button "Sure" / "Nope".
This is quite annoying.

To Reproduce
Steps to reproduce the behaviour:

I don't have any particular steps to list, I always had these extensions installed for a long time:

And for something like +/- 2 weeks this notification keeps showing like I say above.

Expected behaviour

User's choice should be respected and the notification should not be displayed so many times.

• OS: macOS Mojave
• VS Code: 1.41.1
• Extensions versions: see screenshot above.

Missinc Light icons

Light icons are missing.

provide a setting to disable the gradient in the 1.x version

hi~~ I love the old version like 0.12 so much, it works great with the Palenight Theme color theme.

Since recent 1.x updates, the coloring scheme and the gradient on icon changed which I really think not suitable for a Material theme.

I know it's possible to set to the older version like 0.12, but it's really strange for a Material theme to have gradient on icons.

Add/update icon for Pipfile and Pipfile.lock

Similar to #91, Pipefile.lock shows a Ruby icon. The Pipfile itself also doesn't have an icon association. Pipfile is from Pipenv so it is a Python project.

nginx icon folder support

here's the SVG icon
nginx.svg.zip

you can find out the original logo here
https://www.nginx.com/wp-content/uploads/2020/05/NGINX-product-icon.svg

Extension issue

• Issue Type: Bug
• Extension Name: vsc-material-theme-icons
• Extension Version: 1.2.2
• OS Version: Windows_NT x64 10.0.19041
• VSCode version: 1.54.1

⚠️ We have written the needed data into your clipboard. Please paste! ⚠️

Missing material theme command when run fix icons

command 'eqMaterialThemeIcons.fixIcons' not found is showed up when running fix icons accent when material theme is not installed

cargo.lock (and I'm guessing other *.lock files) show what looks like a Ruby icon

Above is a partial screenshot showing what looks like the Ruby icon on one of my cargo.lock files. Is this correct?

New files support for Tailwind

Hi
I didn't know how to work with the repo, so:

"tailwind.config.js": "_file_tailwind",
"tailwind.config.full.js": "_file_tailwind",
"tailwind.config.cjs": "_file_tailwind",
"tailwind.config.full.cjs": "_file_tailwind",

That .full is for the full config file.

Add support for open source extension marketplace (Coder)

I've switched from using Visual Studio Code as a Windows desktop application to using it in my browser through Docker. (Check out "coder": https://github.com/cdr/code-server)

The main "Material Theme" is a viable extension and already shows up, but the other 2 extensions you offer are not (Community and Icons).

Would love to get Icons in there, to make my workspace complete. 🙂

You can see how to make Material Theme Icons scrapable here: https://github.com/cdr/code-server/blob/master/doc/FAQ.md#whats-the-deal-with-extensions

Road to release

This is what should be done before the first release:

• fixIcons command that can fix the icons in relation of the current Material Theme variant (if installed and active for the user) (Darker, Ocean etc) and current accent (Acid Lime, Blue etc).
• fixIcons should take care of hiding the command with the when option if the theme is not installed.
• remove all icons' related things on Material Theme
• update fixes to Material Theme
• show initial notification if Material Theme not installed with the link
• (?)

This post will be updated with other steps.

Add icon for MarkoJS

Hey, there's no icon for .marko files 😢

About marko -> https://markojs.com/

[Icon Request] - .prisma file

I think adding a .prisma icon would be helpful for people developing with the prisma orm. It can help developers spot prisma files more easily.

If you don't know what prisma is check out the description below:

Filename:

• .prisma

Example:

• base.prisma

Prisma Icon:

• https://plugins.jetbrains.com/files/14282/117646/icon/pluginIcon.png

Additional Info:

• https://www.prisma.io/

Add Rich Customization

It would be really sweet if I could run a command that takes in a folder name, an icon file, and a color; and adds it into the theme.

Pink Dot Icon on File

Hello,

I was wondering, what does the pink dot signify in the file structure?
I can't find an explanation anywhere.

Bundling extension

https://code.visualstudio.com/api/working-with-extensions/bundling-extension

Add icon for Crystal

Crystal source files use the extensions .cr and it also includes a template language that has the extension .ecr
Branding can be found at https://crystal-lang.org/media/

Thank you for all the hard work! Love these icons.

Publish to OpenVSX

Unfortunately, MS prohibits the usage of MS marketplace by any other products or redistribution vsix files from it. Because of it we kindly ask you to take ownership of your namespace in OpenVSX and publish it there as well.

OpenVSX is a vendor-neutral alternative to MS marketplace used by all other derivatives of VS Code like Gitpod, OpenVSCode, VSCodium, Theia based IDEs, and so on.

The docs for publishing the extension are here. Technically this should be straightforward. You get a token and call ovsx publish with it. For example, this is how RedHat publishes their java extension.

Let me know if you are open to a PR contributing release GH action both to MS marketplace and OpenVSX. You can find an example of such action here.

Add "display explorer arrow" option

Hello there,

By any chance, is it possible to add an option to show/hide explorer arrows near the folder. I like when I see them and I like your work so, pretty please ? 🥰

Thanks a lot for your time.
Regards,
Leo

Add svelte js icons

File with .svelte extension should have the svelte icons.

vlang icon support

Here is the icon's svg: https://github.com/vlang/v-logo/blob/master/dist/v-logo.svg

Material Theme Icons is not on marketplace anymore

Hi everyone, we are incredibly sorry for what happened, but because of a problem during the publish of a new version and a human error we mistakenly deleted our publisher account on the VSCode marketplace. This followed the deletion of all our public extensions. Seems like a joke after what happened to OVH datacenter, but we are deeply sorry for this.

We immediately sent an email to the VSCode marketplace, but we are waiting an answer before taking an action.
We will going to update the issue during this time.

If someone of the VSCode team is going to read this and can help us it would be really appreciated.

Thank you for your comprehension 😕

In the meantime, you can get the latest packaged extension here and install it. 😔

Download

vsc-material-theme-icons-1.2.2.vsix.zip

How to install

https://code.visualstudio.com/docs/editor/extension-gallery#_install-from-a-vsix

No Palenight Icon Theme

Before this repo was broken out, I was using eq-material-theme-icons-palenight as my icon theme. It seems like this theme no longer exists? Is there any way to access this theme now?

Its possible my install is messed up too - my icons completely disappeared today and I had to manually install this extension to get the icons back.

html files showing no icons.

After the last update .html files stopped showing the propper html icon. They just do so if you use .htm instead of .html.

I solved that on my own setting by adding the following to my settings.json:

"material-icon-theme.files.associations": {
"*.html": "html"
}

Add icon for Small Basic

There is currently no icon for Microsoft Small Basic files using the file extensions .sb and .smallbasic

I created this icon for it:

SVG:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="200mm"
   height="200mm"
   viewBox="0 0 200 200"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
   sodipodi:docname="icon.svg"
   inkscape:export-filename="C:\Box\Programming\Small Basic\extension\assets\icon-8.png"
   inkscape:export-xdpi="1.016"
   inkscape:export-ydpi="1.016">
  <defs
     id="defs2">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="-105 : 49.499998 : 0"
       inkscape:vp_y="0 : 999.99997 : 0"
       inkscape:vp_z="105 : 49.499998 : 0"
       inkscape:persp3d-origin="105 : 98.999997 : 1"
       id="perspective815" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="365.30762"
     inkscape:cy="344.95594"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     showborder="true"
     inkscape:object-nodes="false"
     inkscape:window-width="1280"
     inkscape:window-height="971"
     inkscape:window-x="1358"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-97)">
    <g
       id="g928"
       transform="translate(-7.4083333,8.9958337)">
      <path
         inkscape:connector-curvature="0"
         id="path886"
         d="m 99.218749,119.16323 -52.504289,30.31288 52.504289,30.3134 52.504291,-30.3134 z"
         style="opacity:1;fill:#ff7f2a;fill-opacity:0.49246234;stroke:#ff6600;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <path
         inkscape:connector-curvature="0"
         id="path888"
         d="m 151.72304,149.47611 -52.504291,30.3134 v 60.62678 L 151.72304,210.1029 Z"
         style="opacity:1;fill:#ff7f2a;fill-opacity:0.49246234;stroke:#ff6600;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <path
         style="opacity:1;fill:#ff7f2a;fill-opacity:0.49246234;stroke:#ff6600;stroke-width:2;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         d="m 46.614459,149.47611 52.504291,30.3134 v 60.62678 L 46.614459,210.1029 Z"
         id="path896"
         inkscape:connector-curvature="0" />
    </g>
    <g
       id="g944"
       transform="matrix(0.75629556,0,0,0.75629556,15.745471,72.001748)">
      <path
         style="opacity:1;fill:#00ff00;fill-opacity:0.33165834;stroke:#00ff00;stroke-width:1.33797705;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         d="M 71.156366,179.97713 36.031598,200.2561 71.156366,220.53541 106.28114,200.2561 Z"
         id="path930"
         inkscape:connector-curvature="0" />
      <path
         style="opacity:1;fill:#00ff00;fill-opacity:0.33165834;stroke:#00ff00;stroke-width:1.33797705;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         d="m 106.28114,200.2561 -35.124774,20.27931 v 40.55863 l 35.124774,-20.27932 z"
         id="path932"
         inkscape:connector-curvature="0" />
      <path
         inkscape:connector-curvature="0"
         id="path934"
         d="m 35.964698,200.2561 35.12477,20.27931 v 40.55863 l -35.12477,-20.27932 z"
         style="opacity:1;fill:#00ff00;fill-opacity:0.33165834;stroke:#00ff00;stroke-width:1.33797705;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
    </g>
    <g
       id="g972"
       transform="translate(-7.4083333,8.9958337)">
      <path
         inkscape:connector-curvature="0"
         id="path958"
         d="m 143.91979,168.66016 -38.28063,22.10097 38.28063,22.10135 38.28064,-22.10135 z"
         style="opacity:1;fill:#00ffff;fill-opacity:0.33165834;stroke:#009fff;stroke-width:1.45819056;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <path
         inkscape:connector-curvature="0"
         id="path960"
         d="m 182.20043,190.76113 -38.28064,22.10135 v 44.20271 l 38.28064,-22.10136 z"
         style="opacity:1;fill:#00ffff;fill-opacity:0.33165834;stroke:#009fff;stroke-width:1.45819056;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
      <path
         style="opacity:1;fill:#00ffff;fill-opacity:0.33165834;stroke:#009fff;stroke-width:1.45819056;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
         d="m 105.56625,190.76113 38.28063,22.10135 v 44.20271 l -38.28063,-22.10136 z"
         id="path962"
         inkscape:connector-curvature="0" />
    </g>
  </g>
</svg>

Icon for vue.config.js

Add vue icon to vue.config.js

Browserlist file icon

Add .browserlist and browserlist file icon

Does not work on vscodium

Describe the bug
The icons do not allow me to use them. Instead I get the error below 👇

Unable to load file:///home/jim_4067/.vscode-oss/extensions/equinusocio.vsc-material-theme-32.8.0/build/themes/Material-Theme-Palenight-High-Contrast.json: Unable to read file '/home/jim_4067/.vscode-oss/extensions/equinusocio.vsc-material-theme-32.8.0/build/themes/Material-Theme-Palenight-High-Contrast.json' (EntryNotFound (FileSystemError): Error: ENOENT: no such file or directory, open '/home/jim_4067/.vscode-oss/extensions/equinusocio.vsc-material-theme-32.8.0/build/themes/Material-Theme-Palenight-High-Contrast.json')

Now mind you I had the extension installed but forget I installed it together with the material color theme, so when I was removing the color theme it got rid of the icon theme too and now i'm getting this error.