Add new SVG tab beside webfont

[p32929]

Describe your suggested feature

Hi, thanks a million for maintaining this amazing project. Previously, we could see the SVG file codes/contents before downloading. but in the new website, there's no way I can see the SVG file codes/content before copying/downloading. Can you please add a new SVG tab beside webfont tab? or anywhere you prefer, so that we can see the SVG file contents? here's a screenshot of what I mean:

Thanks a million again. Have a wonderful day.

[mririgoyen]

Can you explain your use case on why you need to physically see the SVG code? You can one-click copy the code or download it, but I'm failing to see a reason to see the raw code, besides with the intention to copy and paste it.

[p32929]

I totally agree. Its for copying and pasting. But when someone is working on a react project ( or any component based web frameworks ), and a component that takes just the path ( the d= value ) as a props value, its easier to see the SVG code and to be able to copy just the necessary part. Let me show you some screenshots for more detailed explanation:

Lets say, I don't need the whole SVG code, I just need a portion of it, like the screenshot above. So that, I can make something like the screenshot below:

It was available previously in materialdesignicons.com but not being able to do in the new website, I've been missing the feature. Thanks... Sorry for my bad English btw

[mririgoyen]

You should be using @mdi/js for this.

import { mdiAccount } from '@mdi/js';

console.log(mdiAccount); // M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z

You're just creating more work for yourself. Tree-shaking takes care of the icons you don't use and it's way easier to update to new versions.

[p32929]

Pardon my ignorance, but why would I have to include a whole package, if I just want to use 1 or 2 icons? There are so many icons that are not even available in material icons ( for instance: the tiktok icon ), which I can just copy the path( the d= value ) from the internet and still use, without needing to include a whole npm package.

& to be honest, its not about what is easier/harder/good/bad, which you'd know way better than me. but its about a feature that was available before in the previous version, but gone in the new version.

[mririgoyen]

I understand your frustration. We have a request to be able to copy/paste other types of XML formats as well. We'll take these into consideration and see if we can come up with a solution that hits all of these use cases at some point in the future. Though, I will be transparent that it is not very high on our priority list at the moment.

For now, I still highly recommend using the full JS package. It's okay if you only use 1 or 2 icons, tree-shaking prevents everything else from being included in your final bundle. If you want access to a large number of brand icons (such as TikTok), we recommend using SimpleIcons. Their package also exports the path data and is tree-shakable.

[p32929]

Thanks for the SimpleIcons recommendation, I really appreciate it. & its very much understandable that it will take time for the feature be implemented, which is okay.

& To be honest, I actually have also tried to make a pull request by doing the work by myself. But I was unable to run the code locally, for some unknown errors. Tried multiple times then gave up and wrote the feature request here. So, I can sleep knowing that I have done my part, which is to convey the message.

Thanks a million for at least taking the feature request into consideration. Have a wonderful day.