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

Мои извинения, если это очень простой вопрос, но как вы используете значки материала google без

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" rel="stylesheet">

?

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

Ответы

Ответ 1

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

Загрузите последнюю версию с github (assets: zip file), разархивируйте и скопируйте папку 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

Ответ 2

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

npm install material-design-icons --save

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

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

Ответ 3

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

npm install material-design-icons --save

вам просто нужно

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

Ответ 4

Верхние подходы не работают для меня. Я загружаю файлы из 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;
}

Я открываю ссылку woff font url 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');
}

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

Ответ 5

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

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

Установите его с беседкой или нпм

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

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

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

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

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

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

Ответ 6

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

  1. установить пакет материалов-дизайн-иконки

    npm install material-design-icons

  2. импортировать файл material-icons.css в .less или .scss файл/проект

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

  3. включить рекомендуемый код в файл/проект reactjs.js

    <i className='material-icons' style={{fontSize: '36px'}}>close</i>

Ответ 7

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

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

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

  • Загрузите эти три файла значков →

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

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

    MaterialIcons-Regular.ttf - формат ('truetype');

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

  • Теперь перейдите к 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';
}

Ответ 8

Используйте материал-дизайн-иконки-иконки

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

Проект Google material-design-icons находится на низком уровне обслуживания и устарел на некоторое время. Существует разрыв между версией в https://material.io/icons/ и версией в material-design-icons.

Я создал материал-дизайн-иконки-иконки для решения этих основных проблем:

  • материал-дизайн-иконки джемы npm install - все ненужные файлы svg/xml/... были удалены
  • Файлы шрифтов всегда актуальны прямо из Google Fonts CDN
  • Поддержка 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"> + icon-id + </i>

<i class="material-icons">contact_support</i>
  • прочитайте полные инструкции для material-design-icons-iconfont для большего количества методов импорта

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

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

image

Ответ 9

Заголовок вопроса спрашивает, как значки материалов хоста отключены, но тело разъясняет, что целью является использовать значки материалов в автономном режиме (акцент мой).

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

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

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

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

Ответ 10

После того, как вы выполнили 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';
}

Ответ 11

С угловым кли

npm install angular-material-icons --save

или же

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

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

Подождите, подождите, подождите, пока установка будет завершена, и затем добавьте ее в angular.json → projects → architect → styles

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

Ответ 12

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

Здесь how.NB: вы загрузите два файла во всех icon.css и somefile.woff.

  • Перейдите по следующему 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 всегда находится в той же папке, что и значок .css. Не стесняйтесь редактировать длинные имена файлов.

Ответ 13

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

Ответ 14

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>

Ответ 15

npm install material-design-icons

и

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

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