Material 圆角图标不适用于 Internet Explorer 11

Question

我正在尝试使用 Rounded Material Icons，但 Internet Explorer 似乎无法使用它。它会显示常规 material 图标，但不会显示圆形图标。它根本不显示任何内容，只是空白。

注意：您必须在 IE 中查看此页面才能看到问题。（抱歉）

<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>

Answer 1

在 IE11 中只有填充主题图标可见，其他主题（轮廓、圆角、Two-Tone、锐利）不可见。但是，当您在 IE11 浏览器 中打开 https://material.io/tools/icons/ 时，所有主题图标都可以正常工作。

因为 Google 对演示页面 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

第 1 步：只需在您的代码中添加以下 样式表。

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

第 2 步： 如果要显示 delete_forever 图标，只需在 delete_forever 之前添加 round- 并用作 class.

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

第 3 步： 你必须为其编写一些样式，我只是创建新的 class mat-custom-icon，编写样式并添加 <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;
}

下面的代码片段包含所有提到的修复。试试这个我希望它能帮助你。谢谢

.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>

Answer 2

我在身边重现了这个问题，并且找到了解决方法。我在的投票最多的答案中找到了它。我也做了一个demo，在IE11下可以运行很好

.material-icons-new {
            display: inline-block;
            width: 24px;
            height: 24px;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .icon-white {
            webkit-filter: contrast(4) invert(1);
            -moz-filter: contrast(4) invert(1);
            -o-filter: contrast(4) invert(1);
            -ms-filter: contrast(4) invert(1);
            filter: contrast(4) invert(1);
        }

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

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

Material 圆角图标不适用于 Internet Explorer 11

Material Icons Rounded not working with Internet Explorer 11

css

internet-explorer

google-material-icons