Обновление (31/03/2019): все темы значков теперь работают через веб-шрифты Google.
Как отметил Эдрик, теперь нужно просто добавить ссылку на веб-шрифты 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 значков контуров, которые работают с обычным веб-шрифтом 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 месяцев с момента появления новых тем значков, Нет способа включить эти значки с помощью встроенного тега <i class="material-icons"></i>.
+ Мартин указал, что на Github возникла проблема, связанная с тем же: https://github.com/google/material-design-icons/issues/773
Итак, пока Google не придумал решение для этого, я начал использовать хак для включения этих новых тем значков в мою среду разработки перед загрузкой соответствующих значков в формате SVG или PNG. И я решил поделиться этим со всеми вами.
ВАЖНО : не используйте это в производственной среде, поскольку каждый из включенных файлов CSS от Google имеет размер более 1 МБ.
Google использует эти таблицы стилей для демонстрации значков на своей демонстрационной странице:
Outline:
<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">
Two-Tone:
<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) Используйте дополнительный 3-й класс icon-white для преобразования цвета с черного на белый (для темного фона)
Изменение размера иконки:
Поскольку это фоновое изображение, а не значок шрифта, используйте свойства CSS height и width, чтобы изменить размер значков. По умолчанию установлено значение 24px в классе material-icons-new.
Пример:
Случай I: Для Изложенные Тема account_circle icon:
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 примет решение для этой проблемы, которое не предполагает загрузку значка для использования.