Materialdesign: Webfont Ligatures (for Angular Material, etc...)

[NenadP]

Documentation specifies svg way to integrate icons with Angular Materials.
Maybe it's worth specifying approach to do the same (Angular Materials) but for web font integration?
(If possible - didn't investigate :) ) If not possible maybe worth as feature request.

[Templarian]

You could definitely use MDI in Angular Material with the regular class approach, but it sounds like you're asking if there is ligature support.

Currently there is no ligatures ability provided (it's something that could be provided, no one's requested it yet, as I assume most just use classes for bootstrap). I'm not 100% sure I answered the question.

[NenadP]

More or less that's it :), so integration is the same as font awesome etc. Thanks

[Templarian]

Might be useful to provide ligature support in the future though. I'm going to rename this issue and mark it as a webfont feature.

[mbellezi]

Any intent of doing this? This could vastly simplify the use of this font as a in place replacement of the Official Material icons font.
There are several libraries and frameworks the use the official font internally.

[m-tomczyk]

I strongly agree with @mbellezi here, there are frameworks that use Official Material Icons by means of ligatures. Having ligatures for this font will make it no-brainer to swap official one providing that all basic icons from official one have counterpart with corresponding ligature.
+1 for this feature

[Templarian]

By the way, this is a very low priority feature as we move to suggesting inline SVG over the webfont in the future. This would be an alternative font and not be included in the default font.

The build tools we use I believe support ligatures, so I'll need to look into the steps required to add this.

[vecernik87]

Hello Templarian,
I am also +1 for this feature. I recently tried to switch from Google's Material Icons to yours MDI in one existing AngularJS project, however I got stuck after realizing I have to rewrite all tags. Having ligature/GSUB can solve this.
Adding Ligature support would also make your font more universal and you wouldn't have to deploy separate SVG file in order to support AngularJS. ( = less work over time)
If you are struggling with implementation, I can investigate what needs to be done. Just let me know what build tools you use and I will gladly contribute my knowledge in order to make this working.

[pauln]

I've just whipped up a super quick and dirty grunt-webfont task, and it seems that (assuming you're using fontforge) all that is needed to generate ligatures is to add ligatures: true to the options hash (within webfont.icons). I haven't tested exhaustively, but initial testing looks good; I tweaked a copy of the official Material Icons font css to use the generated font, and (aside from some differences in glyph names) it pretty much works as a drop-in replacement.

@Templarian, if you don't have time to work on this but are willing/able to share your existing build process, I can probably find some time to help out.

[Templarian]

@pauln I spent a few hours the other day working on this with the node side, but 1/3 of the icons are produced with errors in the glyphs. The plan is to update the SVG data that is incompatible and release a solution without the Font Forge dependency.

A good solution you could build for the community right now would be...

1. Use https://github.com/Templarian/MaterialDesign-SVG
2. Build a public NPM command wrapping grunt-webfont to build the webfont.

The current build I have runs on a legacy version of grunt-webfont and a mix of a lot of server-side, so it's not as easy as just converting it over to a NPM build.

[pauln]

Delving deeper, there do seem to be a few issues with the generated ligature font:

• Narrow icons are not being centred
• Although hyphenated icon names display the correct ligature, the icon's width is pushed out to the width of the icon name
• autoHint: false seems to cause fontforge to get stuck generating the WOFF (it never finishes, just sitting there chewing CPU until I eventually get fed up and kill it)

The node engine doesn't seem to suffer from these problems - but doesn't support ligatures, so isn't an option when the aim is to generate a ligature font.

[pauln]

I noticed that grunt-webfont uses a very old version of svgicons2svgfont - and newer versions support ligatures. I've hacked together a version of grunt-webfont which uses an up-to-date svgicons2svgfont, which results in a ligature font being generated. It's not 100% - but I'm out of time for today. I'll tidy things up and submit PRs wherever I need to tomorrow, and hopefully put everything together and release a (way to build) a ligature font.

[pauln]

I've submitted a pull request to grunt-webfont which updates it to svgicons2svgfont v8.0.0 and enables ligatures in the Node engine. Additionally, I've whipped up a basic builder for ligature fonts - pauln/MaterialDesign-LigatureFont - which currently uses my fork of grunt-webfont so that it's usable without my PR landing.

The plan is to update the SVG data that is incompatible

I suspect that this incompatible SVG data is the reason that the fonts generated by my build script are missing some glyphs. The missing glyphs cause some interesting side effects with ligatures - some of them result in multiple other glyphs being displayed instead, such as checkbox-blank-circle-outline appearing as check box lan circle-outline as its glyph is missing but its ligature includes all of those parts. Do you have a (rough) timeframe in which the incompatibilities will be addressed - or is there anything I can do to help progress it?

[IlCallo]

Any news?
I saw that @pauln PR on svgicons2svgfont has not been merged yet.
Is there some ligature webfont version of MDI around?

[theharshin]

Another use case where ligature support will be useful is Sketch App.
I'm using official Material Fonts to add icons to UIs. The benefit of ligatures is you can override icon in Sketch Symbols as normal text fields. Ligatures are great in terms of icon maintainibility in Sketch UIs.

[Templarian]

Still kind of a low priority for our team at the moment, but I am going to be rewriting our webfont build script. During this step we'll have the ability to enable ligatures. We _will not_ be including these in the webfont build, but will try to provide them for designers.

This rewrite is our effort to setup nightly builds of all of the packages available on NPM right now.

Once again, you should not be using the webfont for the web. The @mdi/svg and @mdi/js packages are provided. Even @mdi/angular-material exists. Adding the ligatures is for designers.

http://dev.materialdesignicons.com/guide/webfont-alternatives

[goyney]

We've decided against doing this because it inflates the size of the font substantially for a niche market.

[Templarian]

I forgot to post I actually did add ligature generation, but it won't work due to the size of our font file. The ligature table can only encode so many characters before it just truncates. So only 2k out of the 5.5k were working.

So can't even add it if we wanted to.

[Templarian]

Found it: https://github.com/Templarian/MaterialDesign-Font/issues/1#issuecomment-602285198