Materialdesign: Migrating from official icon set

[rzb]

I wish I had found this repo before. Unfortunately the official icon set uses text nodes, making it hard to migrate at this point for me. Any suggestions as to what would be the quickest way to migrate?

[Templarian]

Since this project was created before the official set it was modeled off of Font Awesome. I would have to do some research since I've never actually used the official set. Definitely would be a nice guide on the new site to have.

If anyone has any ideas, because it's going to be a while until I can look into this. 🤔

[PeterShaggyNoble]

@Templarian, what @rzb is referring to are the ligatures in Google's font.

[Templarian]

@PeterShaggyNoble Yea, but since we'll never support ligatures in MDI it sounds like there isn't a way to nicely go from official to MDI. Actually going to be pushing SVG more in the new site (especially as we get closer to v2.0.0).

Basically one would have to search the entire project for material-icons and replace each one. Can't think of anything other than manually do that.

[JamesCoyle]

Best (albeit really stupid and likely to go wrong) bet is probably to just do a regex find and replace on all the markup. It also doesn't help that hardly any of our icons use the same names as the Google icons so find and replace isn't really gonna work anyway. Personally I'd use both fonts simultaneously and slowly migrate all of the icons across by hand until you can be sure you haven't missed any.

The ligatures system is actually pretty cool but how well does it perform? Seems like you're asking the browser to do extra work but I guess it could be better than creating a pseudo element for every icon like we do.

Speaking of SVG, I'd prefer that rather than the font based system as it lets you do more with the icons. The issue is the font makes it so much easier to include icons. If there were a javascript library or something which could make including icons just as easy and could group all of the requests to the server into a single request (would be really bad requesting 100 separate SVG files) it would persuade me to make the switch.

[rzb]

Ligatures, yes, thanks @PeterShaggyNoble for pointing out.

I'm also building icons dynamically in js here and there, so searching and replacing wouldn't be enough. Lots of rewriting...

But I plan to use only a handful of MDI icons for where the official set is lacking. How hard would it be to support ligatures for a few icons myself? I have no idea how it works.

[JamesCoyle]

You would be better off just using the inline SVG for those icons.

[rzb]

I ended up using icomoon to build "my own" icon set. It was actually easier than I thought.

The app lets you import the whole official icon set in one click. Then I downloaded and imported the community icons I needed from here as .svg, configured the ligatures and voilà!

[Templarian]

Perfect. If you think it would be useful for others it would be great to write a guide for others. The new site is going to contain tailored for specific things like this.

https://github.com/Templarian/MaterialDesign-Site/issues Open an issue with the content and we'll try and integrate it shortly. icomoon is pretty awesome.