Как предотвратить отображение текста значка материала, когда Google JS не может его преобразовать?

вы можете использовать font-display: block;, просто добавьте этот CSS в заголовок HTML:

<style>
   @font-face {
      font-family: 'Material Icons';
      font-display: block;
    }
</style>

для получения дополнительной информации font-display

Я боролся с подобной ситуацией: моя проблема заключалась не в том, что значки никогда не загружались, а в том, что им могло потребоваться время для загрузки при более медленных соединениях и до тех пор, пока они не загрузили уродливый неформатированный текст, например sentiment_very_satisfied будет отображаться на странице (часто во много раз больше, чем окружающий текст, что также делает его очень очевидным).

Другие решения здесь не помогли мне (включая font-display:block, которые, как я думал, могут быть многообещающими), поэтому я придумал свое, используя CSS и jQuery. Я уверен, что вы могли бы легко адаптировать его для использования ванильного JS.

CSS:

.material-icons{
    opacity:0;
}

jQuery:

$(window).load(function() {
    $('.material-icons').css('opacity','1');
});

Уловка здесь в том, что, в отличие от более часто используемого прослушивателя $(document).ready(), $(window).load() ожидает загрузки всех элементов страницы перед запуском. В данном случае это означает, что прозрачность значков не изменится, пока шрифт значка не будет загружен.

Обратной стороной является то, что значки не будут отображаться до тех пор, пока все на странице не будет загружено, но это был компромисс, на который я был готов пойти, чтобы на моей странице не отображались огромные фрагменты текста. до загрузки шрифта значка.

(Я также добавил переход к CSS .material-icons{transition:opacity 0.5s;}, чтобы они выглядели красиво и плавно.)

Если вы используете загрузчик веб-шрифтов Typekit, вы можете применять условные классы, чтобы скрыть значки, пока веб-шрифт загрузка или если не удалось загрузить, например:

.wf-loading, .wf-materialicons-n4-inactive {
  .material-icons {
    display: none;
  }
}

Вы, конечно, можете применять другие методы укладки в соответствии с вашими предпочтениями для достижения наилучших результатов, например, font-size: 0;, это будет зависеть от вашего сайта и варианта использования.

Чтобы загрузить значки материалов с помощью загрузчика веб-шрифтов, используйте следующую конфигурацию:

window.WebFontConfig = {
  google: {
    families: [
      'Material Icons',
    ],
  },
};

Правильным решением будет добавить максимальную ширину с таким же размером шрифта и установить для переполнения значение «скрыто».

.material-icons {
    max-width: 16px;
    overflow: hidden;
}

Я столкнулся с той же проблемой. Однако я считаю, что использование псевдоселектора, такого как i.material-icons: before, может помочь. См. это для получения дополнительной информации.

---- РЕДАКТИРОВАТЬ: рабочий пример

i.material-icons:before{display:none;}

Если вы используете angularjs, исправление может быть

<i class="material-icons-outlined" ng-bind-html=" 'icon_text' "></i>

или если вы используете jquery, то

HTML

<i material-icons="icon_text" class="material-icons"></i>

jQuery.onLoad

$('[material-icons]').each(function(){
  var icon_text = $(this).attr('material-icons');
  $(this).html(icon_text)
});

Значок появляется после загрузки страницы.

Я обнаружил, что это помогает, если вы вставляете - &display=swap в конце href в теге ссылки следующим образом:

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

вот ссылка для справки

Не исправление, но в браузерах, которые поддерживают предварительное подключение, вы можете попробовать загрузить шрифты как можно скорее. Должно помочь сократить время между отображением текста и значка при медленном подключении.

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

Создайте div style = "position: absolute; top: -1000px" на главной странице и введите все элементы со значком материала класса или отличным шрифтом следующим образом:

<div   style="position:absolute;top:-1000px" >      
<i class="icon material-icons-outlined"  >add_circle</i>
<i class="icon material-icons "  >list_alt</i>
<span class="fas fa-circle fa-stack-2x " ></span>
<span class="fas fa-home fa-stack-1x fa-inverse"  ></span>
</div>

вместо использования полнотекстовых значков материалов вы можете использовать соответствующие им шестнадцатеричные кодовые точки. конечно, это не скрытие, но если шрифт не загружен, он просто показывает неизвестный символ char.

пример:

<i class="material-icons">&#xE87D;</i>

вы можете найти список кодовых точек по адресу:

https://github.com/google/material-design-icons/issues/813#issuecomment-401601344

or

https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/material/icons.dart

Мы можем сначала обнулить прозрачность значков с помощью css, а затем отобразить значки через 3 секунды с помощью addClass.

var delayInMilliseconds = 3000;
setTimeout(function() {
var element = document.getElementById("mayicons");
  element.className +="ops1";
}, delayInMilliseconds);

.material-icons {
    width: 26px;
    height: 30px;
    overflow: hidden;
    opacity: 0;

}

.ops1{
    opacity: 1;
}

<i id="mayicons" class="material-icons ">list</i>