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

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

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

?

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

Метод 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где он относится к нескольким проектам сообщества, которые разделились и продолжают поддерживать значки материалов.

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

npm install material-design-icons --save

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

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

Верхние подходы у меня не работают. Я скачиваю файлы с 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');
}

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

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

npm install material-design-icons --save

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

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

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

Получите этот репозиторий, который является форком исходного репозитория опубликованного 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">

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

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>

Используйте 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>

• прочтите полные инструкции по material-design-icons-iconfont, чтобы узнать о других методах импорта

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

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

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

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

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

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

После этого 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';
}

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

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"
            ],

Обновление 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Соединит где значки находятся в вашем проекте.

2. Теперь давайте зарегистрируем классы значков:

.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, просто добавьте его к двум именам классов.

3. Наконец, давайте подключим начертание шрифта, которое вы использовали на шаге 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>

На 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

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

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

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

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

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

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

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

Например, сгенерируйте сервис- воркера с помощью 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 в имени.

Начиная с 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 позволяет вам использовать этот тег при разработке в автономном режиме.

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

npm install material-design-icons --save

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

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Метод Калояна Стаматова - лучший. Сначала перейдите на 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.

npm install material-design-icons

и

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

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

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

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

Кстати, на 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')

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

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