圆形材质图标不适用于 Internet Explorer 11答案

【问题标题】：Material Icons Rounded not working with Internet Explorer 11圆形材质图标不适用于 Internet Explorer 11
【发布时间】：2019-10-18 13:59:28
【问题描述】：

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

注意：您必须在 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>

【问题讨论】：

标签： css internet-explorer google-material-icons

【解决方案1】：

仅在 IE11 中填充主题图标可见，其他主题（轮廓、圆角、双色调、锐利）不可见。但是，当您在 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">

那么我们应该如何在 IE11 上显示圆形主题图标 - 非常简单

第 1 步：只需在代码中的样式表下方添加即可。

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

第 2 步：如果您想显示 delete_forever 图标，只需在 delete_forever 之前添加 round- 并用作类。

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

第 3 步：你必须为它写一些样式，我只是创建新类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;
}

下面的代码 sn-p 有所有提到的修复。试试这个，希望能帮到你。谢谢

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

【讨论】：

【解决方案2】：

我在我身边重现了这个问题，我找到了解决这个问题的解决方法。我在related thread 的投票最多的答案中找到了它。我也做了一个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>

【讨论】：