Округлые значки материалов не работают с Internet Explorer 11

Question

Я пытаюсь использовать Округлые значки материалов , но похоже, что в 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>

Answer 1

Только в IE11 Заполненные значки тем Видимые и другие темы ( Контурные, Закругленные, Двухцветные, Резкие ) не видны. Но когда вы открываете https://material.io/tools/icons/ в вашем браузере IE11 , все иконки тем работают нормально.

Поскольку 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, просто добавьте round- перед delete_forever и используйте в качестве класса.

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

Ниже приведен фрагмент кода со всеми упомянутыми исправлениями. Попробуйте это, я надеюсь, это поможет вам. Спасибо

.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

Я воспроизвожу эту проблему на своей стороне и нахожу обходной путь для ее решения.Я нашел его в самом популярном ответе связанной темы .Я также сделал демо, и он может хорошо работать в 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>