Feat/update angular and nest icons

[PKief]

Making use of the new API for cloning existing icons to replicate them.

Preview looks like that (so remains the same, but based on a single SVG file):

Angular

Nest

[github-actions]

Merge Successful

Thanks for your contribution! 🎉

The changes will be part of the upcoming update on the marketplace.

[devuco]

Hello 👋

I have a question.
How do I use the nest icons because whenever I create a service or module file in my nest project, it shows angular icons only?

Thank You

[PKief]

@devuco you have to update your user settings like that:

{
  "material-icon-theme.activeIconPack": "nest",
}

Or simply run the following command and select "Nest":

[devuco]

@devuco you have to update your user settings like that:

{
  "material-icon-theme.activeIconPack": "nest",
}

Or simply run the following command and select "Nest":

Thank You
Works like a charm 💯

[nowlena]

It looks like my file associations to the cloned icons no longer show:

  "material-icon-theme.activeIconPack": "nest",
  "material-icon-theme.files.associations": {
    "*.type.ts": "nest-controller",
    "*.utils.ts": "nest-decorator"
  },

my file.type.ts and file.utils.ts files now have no icon

[PKief]

@nowlena You're right. We allowed us to change the API with the last update to introduce a new clone API. That means that there's no nest-controller SVG icon existing anymore. Instead of that you have to clone the existing nest SVG icon and add some color to it like that:

  "material-icon-theme.files.customClones": [
    {
      "name": "nest-controller",
      "base": "nest",
      "color": "light-blue-700",
      "fileExtensions": ["type.ts"]
    },
    {
      "name": "nest-decorator",
      "base": "nest",
      "color": "purple-400",
      "fileExtensions": ["utils.ts"]
    }
  ]

Then it should work as before:

The advantages of that is, that you are not depending on any existing colors anymore but can choose any color that you want for your icons. Here you can find a list of the available colors of the Material Design palette: https://github.com/PKief/vscode-material-icon-theme/blob/main/src/icons/generator/clones/utils/color/materialPalette.ts

You can find more information about the clone feature in our documentation:
https://github.com/PKief/vscode-material-icon-theme?tab=readme-ov-file#custom-clones

[lucas-labs]

@PKief maybe we could find a way to make material-icon-theme.files.associations also work with icons cloned by the extension itself, and avoid breaking current users config. If that's ok with you, I could take some time, it shouldn't be too hard to implement.

Oh, completely unrelated: I noticed the new svgo action removes the mit-no-recolor attr from the svg files (the attribute that made parts of some icon impossible to recolor in edge cases). I'm not too familiar with svgo but I saw it works with plugins and one can create custom plugins. So maybe that's the way to go. But I haven't gotten too much into it just yet. I'll keep you posted :)

[PKief]

@lucas-labs Yeah that would be nice, because I think there might be other users as well where it might have broken some configurations. If you like you can analyze this.

Ah okay, that's unfortunate that svgo removes the attribute. Good that you found that out! I just reverted the removal of the "mit-no-recolor" attribute so that these are still there. Yeah with some plugins it should work. We should figure this out, because svgo is a nice way to optimize the icons.

[PKief]

@lucas-labs I think I've found a solution for the removal of our attribute: #2322