Иконки дизайна материалов неожиданно перестали работать

Я работаю над приложением Cordova, которое я тестировал с помощью Samsung SM-J700P.

Моя настройка для "Иконки материалов" была в основном таковой:

HTML -

<div id="alarm"><i class="material-icons">add_alert</i></div>

CSS -

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(./path/to/MaterialIcons-Regular.woff2) format(woff2),
      url(./path/to/MaterialIcons-Regular.woff) format(woff);
}

У меня есть пакет Material Icons, сохраненный локально в моем проекте, поэтому у него не должно быть проблем с получением значков. Это работает на протяжении всего времени тестирования на этом телефоне, пока пару дней назад я не получил обновление моего SM-J700P. После этого ни один из моих значков больше не появляется. Текущая версия программного обеспечения на телефоне: J700PVPS1AQD1.

Поскольку Cordova по умолчанию использует хромированное окно на Android, мне нужно будет только пакет woff2 для значков, поэтому я сомневаюсь, что это проблема. У меня также есть странная ошибка в моей консоли Android Studio при запуске программы.

E/libEGL: validate_display:225 error 3008 (EGL_BAD_DISPLAY)
I/OpenGLRenderer: Initialized EGL, version 1.4
W/AudioCapabilities: Unsupported mime audio/mpeg-L1
W/AudioCapabilities: Unsupported mime audio/mpeg-L2
//... Lots more Unsupported mime types which I don't understand...
E/chromium: [ERROR:interface_registry.cc(104)] Failed to locate a binder for interface: autofill::mojom::PasswordManagerDriver
More unsupported mime types...

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

Любые идеи?

Изменить: Дополнительная информация. Если я просто покажу html файл в моем собственном браузере Chrome, значки отображаются как обычно. Так что, похоже, это проблема с Кордовой. Я также тестировал приложение с помощью Samsung S7 Edge, которое также не отображало значки, поэтому, похоже, он не зависит от телефона.

Ответ 1

Ответ был неудивительно простым. В CSS я забыл кавычки.

Итак:

@font-face { 
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(../Path/To/MaterialIcons-Regular.woff2) format (woff2);
}

Должно быть:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(../Path/To/MaterialIcons-Regular.woff2) format ('woff2');
}

Это согласно документации Google здесь

Ответ 2

Вы забыли цитаты здесь (после format):

  url(../Path/To/MaterialIcons-Regular.woff2) format ('woff2');