Search code examples
cssinternet-explorergoogle-material-icons

Material Icons Rounded not working with Internet Explorer 11

I'm trying to use Rounded Material Icons but it appears that Internet Explorer isn't having it. It'll display regular material icons, but not the rounded ones. It doesn't display anything at all, just blank.

NOTE: You'll have to view this page in IE to see the issue. (sorry)

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
          rel="stylesheet">
          
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
          rel="stylesheet">

This works
<i class="material-icons">
delete_forever
</i>

This does not
<i class="material-icons-round">
delete_forever
</i>

enter image description here

Solution

  • In IE11 only Filled theme icons Visible and other themes(Outlined, Rounded, Two-Tone, Sharp) not visible. But when you open https://material.io/tools/icons/ in your IE11 browser all themes icons working fine.

    Because Google use different stylesheets for all theme icons on there demo page https://material.io/tools/icons/.

    Outlined:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Rounded:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Two-Tone:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Sharp:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

    So how we suppose to show Rounded Theme icons on IE11 - It's very Simple

    Step 1: Just Add below stylesheet in your code.

    <link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

    Step 2: if you want to show delete_forever icon just add round- before delete_forever and use as a class.

    <i class="round-delete_forever"></i>

    Step 3: You have to write few styling for it, i just create new class mat-custom-icon, write styling and add in <i class="round-delete_forever mat-custom-icon"></i>

    .mat-custom-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

    Below code snippet have all mentioned fixes. Try this I hope it'll help you out. Thanks

    .mat-custom-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-size: contain;
}
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

This works
<i class="material-icons">
delete_forever
</i>

This does not
<i class="material-icons-round">
delete_forever
</i>

This will work on IE11
<i class="round-delete_forever mat-custom-icon"></i>