Templarian / MaterialDesign

✒7000+ Material Design Icons from the Community
https://materialdesignicons.com
Other
10.99k stars 720 forks source link

How to use custom SVGs, or the path data, directly? #7510

Open Blind-Mage opened 3 weeks ago

Blind-Mage commented 3 weeks ago

What is your question?

I have requested an icon to be added in the form of the glider from the Game of Live celular game rules as dine here. As I like the design it was suggested that it is possible to use the SVG directly, or rather the path data, without needing to wait for, or if, it is implemented within the MDI set of icons.

I have attempted to look up how to do this but my searches have either come up dry or point to different icon sets. But not an actual explanation or description of where I would need to look, what I need to put in a specific field or where to place a certain file.

So, as per suggestion and as I agree, to keep things clean and organized: How does one go about using custom SVGs or their path data with or along side the MDI icon set?

As a bit of background: I am using Home Assistant in my local network, which has the Material Design Icons included into their entire system by default and to use an icon all one has to do is in the selection field go mdi:guy-fawkes-mask and the appropriate mask appears in the expected icons location. It is possible to include icon sets from other sources as well via several different methodes, including HACS (Home Assistant Community Store), and to use them instead of one from MDI you change the the prefix to what ever that icon pack uses. for example: hue:dimmer-switch

As my use case for the requested icon is within Home Assistant, and showing the current open state of my local hacker space, I naturally started to look for ways to use the SVG path directly within Home Assistant. As per suggestion of the person who made the SVG. Searching the web I either find people who implemented their own icon sets and make it available via HACS or some other methodes, an explanation of HA going to change to a more scripted approach to load icons from over 4 years ago, or pages upon pages of people asking the same question of "how do I use custom SVGs" with seemingly no answer or it devolving in just talks about alignment of the actual icon within a frame... regardless nothing seems to be what I need or come close to the idea of "directly"...

So to help others who might run into this problem of their search engine wrangling skills lacking or otherwise end up on this page with a similar question. and also as a TL:DR and reminder: How does one use the SVG and/or the path data directly as an icon?

steodor commented 6 days ago

Sorry for the delayed response. Thanks for the background, now I can see what you meant. Previously I wrongly assumed that you are in control of the software which displays the icons (e.g. you're the programmer) but you are not. You have probably already read this https://www.home-assistant.io/docs/frontend/icons/ since you added the icon request in the first place. Sadly, this does indeed leave you hanging until both MDI picks up the icon in their next release (which can take quite some time) and then HA picks up the MDI library update.

So as you already found, the fastest way seems to be creating a repository with your custom icons (like i can see fontawesome has theirs here https://www.hacs.xyz/docs/use/repositories/dashboard/#search-repositories ) and integrate that into HA via HACS. Then, since you're in control of your own repository, you can add any icons you like, whether they are already in MDI or not. It's probably a pain to set up initially but easy to add icons from then on. Sorry I can't help you there since I haven't ever used HA. Perhaps ask HA or the people that you found that were already doing this? Good luck!