Material-design-icons: Material Icons Round/Sharp/Outlined/Two Tone variants don't work in IE11

Created on 8 Aug 2019 · 1Comment · Source: google/material-design-icons

Material Icons works fine in IE11 (as long as font-feature-settings: 'liga' is set), but the variants Material Icons Round, Material Icons Sharp, Material Icons Outlined, and Material Icons Two Tone all seem to render nothing in IE11.

Repro:

https://jsbin.com/nigebij/edit?html,output

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">
    <style>
      span {
        font-size: 48px !important;
      }
    </style>
  </head>
  <body>
    <span class="material-icons">print</span>
    <span class="material-icons-round">print</span>
    <span class="material-icons-sharp">print</span>
    <span class="material-icons-two-tone">print</span>
    <span class="material-icons-outlined">print</span>
  </body>
</html>

Expected (result from Chrome 76):

Actual (result from IE11):

Source

aomarks

👍2

>All comments

Try Iconify instead of font. It requires much less bandwidth because it loads only icons that are used on page, works fine with IE11 and renders SVG that looks identical in all browsers:

<!doctype html>
<html>
  <head>
    <script src="https://code.iconify.design/1/1.0.3/iconify.min.js"></script>
    <style>
      .iconify {
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <span class="iconify" data-icon="ic:baseline-print"></span>
    <span class="iconify" data-icon="ic:round-print"></span>
    <span class="iconify" data-icon="ic:sharp-print"></span>
    <span class="iconify" data-icon="ic:twotone-print"></span>
    <span class="iconify" data-icon="ic:outline-print"></span>
  </body>
</html>