How Do Ligature Icons Work in Material Icons

Font ligature icons in Microsoft edge

Try to use F12 developer tools to check whether the Google Icons CSS reference load success.

The following code works well on Edge 42 and Edge 44 version:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
    @font-face {
        font-family: 'Material Icons';
        font-style: normal;
        font-weight: 400;
        src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
        src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'), url(https://example.com/MaterialIcons-Regular.woff) format('woff'), url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
    }

    .material-icons {
        font-family: 'Material Icons';
        font-weight: normal;
        font-style: normal;
        font-size: 24px; /* Preferred icon size */
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
        /* Support for all WebKit browsers. */
        -webkit-font-smoothing: antialiased;
        /* Support for Safari and Chrome. */
        text-rendering: optimizeLegibility;
        /* Support for Firefox. */
        -moz-osx-font-smoothing: grayscale;
        /* Support for IE. */
        font-feature-settings: 'liga';
    }
</style>
<i class="material-icons">face</i>

The output screenshot as below:

angular 6 custom material icons with ligature support

Sure its possible:

Step 1) Get all the SVG icons.

Step 2) Create your font with a custom ligature.

This is a tool, to create your own font library with ligature support.
https://icomoon.io

Step 3:

Declare your own font.

@font-face {
  font-family: 'icomoon';
  src: url('path.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Step 4:
Override the .material-icons with you own font

.material-icons {
  font-family: 'MyFontFamily';
   ...
}

or declare your own fontSet so you can work with both.

// Register to AppComponent

 constructor(iconRegistry: MatIconRegistry) {
    iconRegistry.registerFontClassAlias('MyFontFamily', 'MyIconClass');
 }

Last step.

<mat-icon>LigatureToDisplay</mat-icon>

OR

<mat-icon fontSet="MyIconClass">LigatureOrUnicodeToDisplay</mat-icon>

Here is a small tutorial.

https://medium.com/@buddhiv/add-a-custom-icon-font-in-your-application-b1e07a687953

material icon ligatures not working with Pug

I have found a workaround for this. Since I couldn't seem to get it to work this way I used the md-icon with a SVG path. I just downloaded the SVG files from material.io and placed them in a folder and then used this HTML:

<md-icon md-svg-src="icons/android.svg" aria-label="android "></md-icon>

Or this pug:

md-icon(md-svg-src="icons/android.svg" aria-label="android ")

and that seemed to work. hope it may help someone else someday. Just don't rely on the ligatures since it may not always work (mostly for IE browsers)

Whever I start using mdIconProvider I might update this answer to help out some more people

Font icon ligatures

I did it.

Instead of fontello.com I must use icomoon.io, where there is a specific feature for ligatures:

Ligatures

To enable/disable ligatures, press the fi button in the font tab of the app. By enabling ligatures, you will be able to assign words/tags to each glyph. (use comma to assign multiple words to each glyph.)

If the platform in which you use your font supports ligatures, typing the words you assign to each glyph would bring up that glyph. Ligatures are not supported in IE 9 and older, but the IcoMoon app provides a javascript polyfill for you. IE 10 and other modern browsers support ligatures.

---

Related Topics