Material Icons in IE11 not showing

GoJS
1

I’ve implemented a function, which provides a button with an icon on it. Material Icons (Google) are included via bower.

$(go.TextBlock, {
        text: 'zoom_out_map',
        stroke: '#000',
        font: '20px Material Icons',
        margin: new go.Margin(2,-1,-3,-1),
        width: 20,
        height: 20,
        editable: false,
        isMultiline: false
    }
)

This works fine for Firefox and Chrome, but in IE11 the button is empty.

Firefox:
IE11:

I found out that this is caused by a missing CSS class/property, because this code works in FF and Chrome but not in IE11:
<i style="font-family: 'Material Icons'">zoom_out_map</i>

BUT

when adding this CSS class to the line above, the icon is shown properly, also in IE11

.material-icon {
    font-family: 'Material Icons';
    /* Support for IE. */
    font-feature-settings: 'liga';
}

Now my questions: Is there any way I can set font-feature-settings: 'liga'; to the icon in GoJS, or is there a better way to include the icon?

2

(sorry for the delay – we’re still investigating this…)

3

Unfortunately the HTML Canvas does not get the same amount of text control that CSS3/4 do. You can only set font properties that are settable using the CSS property “font”, which is what the TextBlock is setting (setting it on the TextBlock sets the HTML Canvas.font property, which is roughly analagous to the CSS font property). You cannot set font-features-settings this way, so you cannot set them for the Canvas.

You can however, draw SVG to GoJS either as a .svg image or using SVG path syntax. Fortunately Google does provide all of the icons as SVG sprites. Depending on the number of material icons you want to use, this will take some footwork on your part.

All you need to do is look at the MaterialIcons-Regular.svg file and pick the SVG icons you want to use, and turn them into GoJS paths. 99% of the time this will just mean copy and pasting the SVG path string, since GoJS accepts SVG paths trings.

Here’s the example with zoom_out_map:

https://codepen.io/simonsarris/pen/GMeXjX?editors=1010

The material icons are here, which is the file in their github repository here.

Do note that for GoJS to fill the path, you must add "F " at the start. If you don’t do this you may see nothing.

One plus of doing it this way (assuming you only have a handful of them that you are using) is that you will not need to depend on any externally loaded resources to get them working, or deal with loading-timing issues, or (apparently) IE compatibility issues.

4

Thank you for your quick and detailed answer.
As I use only two icons in GoJS this will be the best option.

I use the SVG path strings of those two icons and everything works fine.
Thanks a lot! :)