Как разместить значки материалов в автономном режиме?

107

Приношу свои извинения, если это очень простой вопрос, но как использовать значки материалов Google без

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

?

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

Люк Тан
источник
Эта статья объясняет Angular, мысль может быть полезна для кого-то, thecodeframework.com/…
Гаган

Ответы:

113

Метод 2. Самостоятельный хостинг. Руководство разработчика.

Загрузите последнюю версию с github (ресурсы: zip-файл), распакуйте и скопируйте папку iconfont, содержащую файлы значков дизайна материалов, в свой локальный проект - https://github.com/google/material-design-icons/ релизы

Вам нужно только использовать папку iconfont из архива: она содержит шрифты иконок в разных форматах (для поддержки нескольких браузеров) и шаблонный CSS.

  • Замените источник в атрибуте url @ font-face относительным путем к папке iconfont в вашем локальном проекте (где расположены файлы шрифтов), например. URL ("iconfont / MaterialIcons-Regular.ttf")
@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

Пакеты NPM / Bower

У Google официально есть опция зависимости Bower и NPM - следуйте Руководству по значкам материалов 1

Использование беседки :bower install material-design-icons --save

Использование NPM :npm install material-design-icons --save

Значки материалов : в качестве альтернативы изучите шрифт значка материального дизайна и структуру CSS для самостоятельного размещения значков на сайте @ marella https://marella.me/material-icons/


Заметка

Кажется, у Google есть проект в режиме низкого обслуживания. Последний выпуск на момент написания был 3 года назад!

На GitHub есть несколько проблем по этому поводу, но я хотел бы сослаться на комментарий @cyberalien по проблеме, Is this project actively maintained? #951где он относится к нескольким проектам сообщества, которые разделились и продолжают поддерживать значки материалов.


bfmags
источник
Как бы вы сделали это для приложения GAP для телефона, где у вас не было бы домена?
Люк Тан
укажите свою локальную папку в исходном URL-адресе @ font-face: url ("iconfont / MaterialIcons-Regular.woff2" - обновленный ответ
bfmags
Эй, не могли бы вы дать обновленный ответ на это. Я загрузил свои значки mdl с помощью npm.
TheBAST
2
Решил свою проблему ... Сразу хочу отметить, что нам нужна только iconfontпапка из всего архива.
securecurve
для этого типа «переместить ресурс cdn для локального обслуживания» обычно окупается наличие более 3000 данных о среднем времени ответа ДО и ПОСЛЕ изменения - вы будете удивлены, насколько часто это того не стоит, независимо от ваши усилия по достижению этого ...
Йордан Георгиев
38

Я создаю для Angular 4/5 и часто работаю в автономном режиме, поэтому у меня сработало следующее. Сначала установите NPM:

npm install material-design-icons --save

Затем добавьте в styles.css следующее:

@import '~material-design-icons/iconfont/material-icons.css';
Ричард Баун
источник
10
когда вызываете "npm install", подождите, подождите, подождите, lol ... но работает спустя долгое время
Серджио Кабрал
2
@SergioCabral К счастью, вы сделали комментарий об ожидании, потому что было около 5 раз, когда я думал, что эта установка никуда не денется ... :)
Alfa Bravo
1
Спасибо, понравилось, это лучшее решение, спасибо <3
Али Джамал
Работаю и
3
есть идеи, как добавить выделенные значки?
wutzebaer
20

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

Я открыл ссылку на источник значка материала:

https://fonts.googleapis.com/icon?family=Material+Icons

и я увидел эту разметку:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Я открываю ссылку на URL-адрес шрифта woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

и загрузите файл woff2.

Затем я заменяю путь к файлу woff2 новым в material-icons.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Это заставляет меня работать.

Калоян Стаматов
источник
Спасибо! У меня была такая же проблема, и это решило ее для меня.
Дэвид
Я решаю свою проблему с помощью этого подхода, но позже я нашел еще одно репозиторий git, откуда я получил правильный выпуск.
Калоян Стаматов
@ Калоян Stamatov бы неплохо поделиться тем, что мерзавец репо .. так много людей имеют проблемы с устаревшей официальной репо :)
Grashopper
@Grashopper, у меня его больше нет. Извините
Калоян Стаматов
1
более актуальное в 2019 году, это решение тоже сработало для меня.
compt
17

Если вы используете проект webpack, после

npm install material-design-icons --save

тебе просто нужно

import materialIcons from 'material-design-icons/iconfont/material-icons.css'
Владислав Косовских
источник
7
Я не рекомендую это делать, репо слишком велико, используйте одно desc. ниже npmjs.com/package/material-design-icons-iconfont я также заметил, что браузер будет кешировать fonts.googleapis.com/icon?family=Material+Icons и будет работать в автономном режиме. Оформить заказ keemor.github.io/#
keemor
Я новичок в npm, вы можете уточнить import materialIcons from 'material-design-icons/iconfont/material-icons.css'. Мы добавляем эту строку куда? app.js или где-нибудь еще. Я использую framework7 с Vue и пробовал. У меня это не сработало.
Суат Атан PhD
@SuatAtanPhD, вы добавляете этот импорт, как и любой другой импорт стиля. Если вы используете webpack, вам нужно что-то вроде style-loader, css-loader, и вы можете разместить этот импорт в любом месте вашего js-кода, например, в index.js или app.js и т. Д.
Владислав Косовских,
1
Такой подход рекомендуется для построения корпоративного веб-приложения, которое может работать во внутренней сети без доступа к Интернету
Юрий Братчук
13

Это может быть простое решение


Получите этот репозиторий, который является форком исходного репозитория опубликованного Google.

Установите его с помощью bower или npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Импортируйте файл css на свою HTML-страницу

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

или

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Тест: добавьте значок внутри тега тела вашего HTML-файла

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

Если вы видите значок лица, все в порядке.

Если не работает, попробуйте добавить это ..как префикс к node_modulesпути:

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
Md. Харун или Рашид
источник
Применяя материал-дизайн-иконку-iconfont пакет работает даже со стандартной Угловой в mat-iconкомпоненте. Таким образом, переход будет плавным.
Юрий
Это решение, которое сработало для меня, за исключением того, что ссылка на таблицу стилей в index.html не сработала - мне пришлось добавить импорт в мой файл Styles.scss: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; тогда мои локально размещенные значки
Ade
7

Мой рецепт состоит из трех шагов:

  1. установить пакет material-design-icons

    npm install material-design-icons
  2. для импорта файла material-icons.css в файл / проект .less или .scss

    @import "~/node_modules/material-design-icons/iconfont/material-icons.css";
  3. включить рекомендуемый код в файл / проект responsejs .js

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>
Римский
источник
этого пакета больше не существует
yehonatan yehezkel
с помощью angular cli, выполните npm install material-design-icons, а затем добавьте css в angular.json -> architecture-> build-> styles
Wlada
6

Используйте material-design-icons-iconfont

Полное раскрытие, я автор этого пакета

Проект Google Material-Design-Icons не требует особого обслуживания и некоторое время устарел . Есть разрыв между версией в https://material.io/icons/ и версией в material-design-icons .

Я создал material-design-icons-iconfont для решения следующих основных проблем:

  • материал-дизайн-иконки заедает npm install- все нерелевантные файлы svg / xml / ... были удалены
  • Файлы шрифтов всегда обновляются прямо из Google FontsCDN
  • Поддержка scss

Установить через npm

npm install material-design-icons-iconfont --save

Это зависит от того, как вы упаковываете свое веб-приложение ( webpack/ gulp/ bower/ ...), вам необходимо импортировать файл .css/ .scss(и может измениться относительный путь к шрифтам)


Импорт с использованием SCSS

Импортируйте в один из ваших файлов sass

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Позже укажите желаемый значок <i class="material-icons">+ id-значка +</i>

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

Демо-страница

Он поставляется с легкой демонстрационной страницей для помощи в поиске и копировании шрифтов.

образ

Йосеф Харуш
источник
1
У меня проблема с PWA. Значки работают, пока вы находитесь в браузере, но после добавления ярлыка на главный экран и запуска значки приложений не отображаются.
Wlada
4

В своем ответе я попытался скомпилировать все, что нужно сделать для значков самостоятельного хостинга. Вам нужно выполнить эти 4 простых шага.

  1. Откройте папку iconfont в репозитории материализации.

    ссылка- https://github.com/google/material-design-icons/tree/master/iconfont

  2. Загрузите эти три файла значков ->

    MaterialIcons-Regular.woff2 - формат ('woff2')

    MaterialIcons-Regular.woff - формат ('woff')

    MaterialIcons-Regular.ttf - формат ('истинный тип');

    Примечание. После загрузки вы можете переименовать его во что угодно.

  3. Теперь перейдите в свой CSS и добавьте этот код

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}


Примечание. Адрес, указанный в src: url (...), должен относиться к «файлу CSS», а не к файлу index.html. Например, это может быть src: url (../ myicons / MaterialIcons-Regular.woff2)


  1. Теперь вы готовы к использованию, и вот как это можно сделать в HTML

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

Щелкните здесь, чтобы увидеть все значки, которые можно использовать.

abhinav1602
источник
404 по вашей ссылке
Welyngton Dal Prá
1
@ WelyngtonDalPrá Спасибо. исправлено
abhinav1602
3

После этого npm install material-design-iconsдобавьте это в свой основной файл CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}
Маноло Альварес
источник
3

С угловым кликом

npm install angular-material-icons --save

или

npm install material-design-icons-iconfont --save

material-design-icons-iconfont - это последняя обновленная версия иконок. angular-material-icons давно не обновляется

Подождите, подождите, подождите, пока установка будет завершена, а затем добавьте ее в angular.json -> проекты -> архитектор -> стили

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

или если вы установили material-desing-icons-iconfont, тогда

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],
Влада
источник
3

Обновление 2019 здесь:

Для самостоятельного размещения значков материалов: Обычные, Закругленные, Резкие и все варианты. Получите их из этого репо: https://github.com/petergng/material-icon-font

По какой-то причине я не знаю, почему эти шрифты не так легко доступны из репозиториев Google.

Но вот.

После загрузки пакета перейдите в папку bin, и вы увидите четыре варианта. Конечно, решать вам, что использовать.

Чтобы использовать их, создайте файл css и

  1. Создайте начертание шрифта для каждого необходимого вам варианта:
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

urlСоединит где значки находятся в вашем проекте.

  1. Теперь давайте зарегистрируем классы значков:
.material-icons-outlined, .material-icons {
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

Это заставит оба класса использовать одни .material-icons-outlined, и .material-iconsте же значения по умолчанию. Если вы хотите использовать .material-icons-sharp, просто добавьте его к двум именам классов.

  1. Наконец, давайте подключим начертание шрифта, которое вы использовали на шаге 1.
.material-icons {
    font-family: 'Material Icons';
}
.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

Опять же, чтобы использовать больше вариантов, таких как Sharp, просто добавьте его блок, как два выше.

Как только закончите ... перейдите в свой html и используйте недавно созданные значки.

<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
Wale
источник
2

На http://materialize.com/icons.html информации заголовка стиля, которую вы включаете на страницу, вы можете перейти к фактической гиперссылке и сделать локализованные копии для использования значков в автономном режиме.

Вот как это сделать. Примечание: вы загрузите два файла во всех icon.css и somefile.woff .

  1. Перейдите по следующему URL-адресу, как требуется в заголовке

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

Сохраните страницу как Any_filename.css. По умолчанию icon.css

  1. Ищите такую ​​строку

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

  1. Перейдите по URL-адресу, заканчивающемуся .woff

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Ваш браузер автоматически загрузит его. Сохраните его в папке CSS.

  1. Теперь у вас должны быть два файла: icon.css и 2fcrYFNa .... mY.wof22 , сохраните их оба в своем css. Теперь внесите изменения в местоположение заголовка css в файл icon.css в своих каталогах. Просто убедитесь, что файл .woff2 всегда находится в той же папке, что и icon.css. Не стесняйтесь редактировать длинные имена файлов.

Джозеф Куэй
источник
2

В заголовке вопроса задается вопрос, как разместить значки материалов в автономном режиме, но в теле поясняется, что цель состоит в том, чтобы использовать значки материалов в автономном режиме (выделено мной) .

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

Например, сгенерируйте сервис- воркера с помощью Workbox , используя простейший подход: запустив workbox-cli и приняв значения по умолчанию, а затем добавьте следующий текст к сгенерированному сервис-воркеру:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Затем вы можете проверить, что он был кеширован в Chrome, используя F12> Приложение> Хранилище> IndexedDB, и найдите запись с googleapis в имени.

Джозеф Симпсон
источник
Я заставил это работать также с некоторыми небольшими изменениями. Я изменил "workboxSW" на "workbox". Я изменил «маршрутизатор» на «маршрутизацию» и добавил этот код в мой файл sw_config.js, который создается при использовании мастера cli рабочей панели.
Джейсон Оллшорн
2

Начиная с 2020 года, я использую пакет material-icons-font . Он упрощает использование пакета Google material-design-icons и сообщества material-design-icons-iconfont .

  1. Установите пакет. npm install material-icons-font --save

  2. Добавьте путь к файлу CSS пакета в свойство style файла angular.json вашего проекта.

    ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

  3. При использовании SCSS скопируйте содержимое ниже в начало файла styles.scss.

    @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

  4. Используйте значки в HTML-файле вашего проекта.

    // Using icon tag
    <i class="material-icons">face</i>
    <i class="material-icons md-48">face</i>
    <i class="material-icons md-light md-inactive">face</i>
    
    // Using Angular Material's <mat-icon> tag
    <mat-icon>face</mat-icon>
    <mat-icon>add_circle</mat-icon>
    <mat-icon>add_circle_outline</mat-icon>

Иконки из @ angular / material имеют тенденцию ломаться при разработке в автономном режиме. Добавление пакета material-icons-font в сочетании с @ angular / material позволяет вам использовать этот тег при разработке в автономном режиме.

HelloWorldPeace
источник
0

Установить пакет npm

npm install material-design-icons --save

Поместите путь к файлу css в файл styles.css

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Ахмет Арслан
источник
0

Метод Калояна Стаматова - лучший. Сначала перейдите на https://fonts.googleapis.com/icon?family=Material+Icons . и скопируйте файл css. контент выглядит так

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

Вставьте источник шрифта в браузер, чтобы загрузить файл woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Затем замените файл в исходном источнике. Вы можете переименовать его, если хотите. Нет необходимости скачивать файл размером 60 МБ с github. Мертвый простой Мой код выглядит так

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

а materialIcon.woff2 - это загруженный и замененный файл woff2.

chris_wire
источник
1
Не работает во всех браузерах, см. Этот SO-ответ для получения дополнительной информации: stackoverflow.com/questions/11002820/…
xaviert
-1
npm install material-design-icons

и

@import '~material-design-icons/iconfont/material-icons.css';

также работал у меня с Angular Material 8

сторона105
источник
-1

Добавил это в веб-конфигурацию, и ошибка исчезла

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>
tfa
источник
-1

Кстати, на YouTube есть видео с пошаговыми инструкциями.

https://youtu.be/7j6eOkhISzk

  1. Это шаги. Загрузите пакет значков материализации с https://github.com/google/material-design-icons/releases

  2. Скопируйте папку icon-font и переименуйте ее в icons.

  3. Откройте файл materialize.css и обновите следующие пути:

а. с URL-адреса (MaterialIcons-Regular.eot) на URL-адрес (../ fonts / MaterialIcons-Regular.eot) b. из формата URL (MaterialIcons-Regular.woff2) ('woff2') в формат URL (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. из формата url (MaterialIcons-Regular.woff) ('woff') в формат url (../ fonts / MaterialIcons-Regular.woff) ('woff') d. из формата URL (MaterialIcons-Regular.ttf) ('truetype') в формат URL (../ fonts / MaterialIcons-Regular.ttf) ('truetype')

  1. Скопируйте файл materialize-icon.css в папку css и укажите его в своем html-файле.

Все будет работать как по волшебству!

SicMundus
источник