Обновление (31/03/2019): все темы значков теперь работают через Google Web Fonts.
Как отметил Эдрик, теперь нужно просто добавить ссылку на веб-шрифты Google в заголовок документа, например:
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
И затем добавление правильного класса для вывода иконки определенной темы.
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
Цвет значков также можно изменить с помощью CSS.
Примечание: двухцветные иконки темы в настоящее время немного сбивают с толку.
Обновление (14/11/2018): список из 16 значков контуров, работающих с суффиксом _outline.
Вот последний список из 16 значков контуров, которые работают с обычным Web-шрифтом Material-icons, используя суффикс _outline (проверено и подтверждено).
(Как указано на странице github material-design-icons . Искать: " _outline_24px.svg ")
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
Обратите внимание , что pie_chart должен быть « pie_chart_ изложены » и не обрисовать .
Это взломать, чтобы проверить новые темы значков с помощью встроенного тега. Это не официальное решение.
По состоянию на сегодня (19 июля 2018 года), чуть более 2 -х месяцев с момента были введены новые темы иконок, есть No Way включить эти иконки с помощью инлайн тег <i class="material-icons"></i>.
+ Мартин отметил, что на Github возникла проблема, связанная с тем же: https://github.com/google/material-design-icons/issues/773
Поэтому, пока Google не придумает решение для этого, я начал использовать хак для включения этих новых тем значков в мою среду разработки, прежде чем загружать соответствующие значки в формате SVG или PNG. И я думал, что поделюсь этим со всеми вами.
ВАЖНО : не используйте это в производственной среде, так как каждый из включенных файлов CSS от Google имеет размер более 1 МБ.
Google использует эти таблицы стилей для демонстрации значков на своей демонстрационной странице:
Контур:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
Округлые:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
Две тонны:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
Sharp:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
Каждый из этих файлов содержит значки соответствующих тем, включенных в качестве фоновых изображений (Base64 image-data). И вот как мы можем использовать это, чтобы проверить совместимость определенного значка в нашем дизайне, прежде чем загружать его для использования в производственной среде.
ШАГ 1 :
Включите таблицу стилей темы, которую вы хотите использовать. Например: для темы «Outlined» используйте таблицу стилей для «outline.css».
ШАГ 2 :
Добавьте следующие классы в свою собственную таблицу стилей:
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
ШАГ 3 :
Используйте значок, добавив следующие классы к<i> теге:
1) material-icons-newкласс
2) Имя значка, как показано на демонстрационной странице значков материала, с префиксом имени темы и дефисом.
Префиксы:
Изложенные: outline-
Округлые: round-
Две тонны: twotone-
Sharp: sharp-
Например (для значка «объявление»):
outline-announcement, round-announcement, twotone-announcement,sharp-announcement
3) Используйте опциональный третий класс icon-whiteдля инвертирования цвета с черного на белый (для темного фона)
Изменение размера иконки:
Поскольку это фоновое изображение, а не значок шрифта, используйте свойства heightи widthсвойства CSS для изменения размера значков. По умолчанию в material-icons-newклассе установлено значение 24px .
Пример:
Случай I: Для Контурной Темы account_circle значка:
1) Включите таблицу стилей:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2) Добавьте значок на свою страницу:
<i class="material-icons-new outline-account_circle"></i>
Необязательно (для темного фона):
<i class="material-icons-new outline-account_circle icon-white"></i>
Случай II: Для Sharp Тема иконы оценки :
1) Включите таблицу стилей:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2) Добавьте значок на свою страницу:
<i class="material-icons-new sharp-assessment"></i>
(Для темного фона):
<i class="material-icons-new sharp-assessment icon-white"></i>
Я не могу не подчеркнуть, что это НЕ ПРАВИЛЬНЫЙ способ включить значки в вашу производственную среду. Но если вам приходится сканировать несколько значков на странице в разработке, это делает включение значков довольно простым и экономит много времени.
Загрузка иконки в формате SVG или PNG, безусловно, является лучшим вариантом, когда речь идет об оптимизации скорости сайта, но иконки шрифтов экономят время, когда дело доходит до этапа создания прототипа и проверки соответствия конкретного значка вашему дизайну и т. Д.
Я буду обновлять этот пост, если и когда Google примет решение для этой проблемы, которое не включает загрузку значка для использования.
