Что такое материальные символы?
Символы материалов — это наши новейшие значки, объединяющие более 2500 глифов в одном файле шрифта с широким спектром вариантов дизайна. Символы доступны в трех стилях и четырех регулируемых осях шрифта (заливка, вес, сорт и оптический размер). Полный набор символов материалов см. в Библиотеке символов материалов .
Ось FILL
Заливка дает вам возможность изменить стиль значков по умолчанию. Один значок может отображать как незаполненное, так и заполненное состояние.
Чтобы передать переход между состояниями, используйте ось заливки для анимации или взаимодействия. Значения: 0 по умолчанию или 1 для полного заполнения. Помимо оси веса, заливка также влияет на внешний вид значка.
wght ось
Толщина определяет толщину штриха символа в диапазоне от тонкого (100) до жирного (700). Вес также может влиять на общий размер символа.
ось GRAD
Вес и класс влияют на толщину символа. Корректировки класса являются более детальными, чем корректировки веса, и оказывают небольшое влияние на размер символа.
Оценка также доступна в некоторых текстовых шрифтах. Вы можете сопоставить уровни оценок между текстом и символами для создания гармоничного визуального эффекта. Например, если текстовый шрифт имеет значение оценки -25, символы могут соответствовать ему с подходящим значением, скажем, -25.
Вы можете использовать оценку для разных нужд:
Низкий уровень акцента (например, -25): чтобы уменьшить блики светлого символа на темном фоне, используйте низкий уровень.
Высокий акцент (например, оценка 200): чтобы выделить символ, увеличьте положительную оценку.
ось opsz
Оптические размеры варьируются от 20dp до 48dp.
Чтобы изображение выглядело одинаково при разных размерах, толщина (толщина) обводки меняется по мере масштабирования размера значка. Оптический размер позволяет автоматически регулировать толщину штриха при увеличении или уменьшении размера символа.
Получение символов материалов
Символы материалов доступны в нескольких форматах и подходят для разных типов проектов и платформ, как для разработчиков в их приложениях, так и для дизайнеров в их макетах или прототипах.
Лицензирование
Символы материалов доступны по лицензии Apache версии 2.0 .
Просмотр и загрузка отдельных значков
Полный набор символов материалов доступен в библиотеке символов материалов в форматах SVG или PNG. Они подходят для Интернета, Android и iOS или для любых инструментов дизайнера.
Git-репозиторий
Репозиторий git содержит полный набор символов материалов в формате SVG.
$ git clone https://github.com/google/material-design-icons
Использование символов материалов
Использование в Интернете
Шрифт «Символы материалов» — это самый простой способ включить символы материалов в веб-проекты.
Значки упакованы в один шрифт, поэтому веб-разработчики могут легко включить эти значки всего в несколько строк кода.
Статический шрифт с Google Fonts
Самый простой способ настроить шрифты значков для использования на любой веб-странице — через Google Fonts . Включите эту единственную строку HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Приведенный выше фрагмент включает конфигурацию по умолчанию для каждой оси с весом 400, оптическим размером 48, уклоном 0 и заливкой (также 0).
Используйте Fonts CSS API для настройки различных значений осей. Взгляните на следующие примеры:
Переменный шрифт с помощью Google Fonts
Если вы анимируете значки с помощью CSS или хотите более точно контролировать функции значков, используйте переменный шрифт Google Символы. Используя диапазоны в формате number..number , мы можем загрузить весь переменный шрифт. Ознакомьтесь с поддержкой переменных шрифтов в разделе «Могу ли я использовать переменные шрифты», чтобы понять, смогут ли ваши пользователи загружать переменный шрифт? Скорее всего, да. Вот несколько примеров:
Или даже анимируйте их!
Оптимизируйте шрифт значка
Настройте шрифт так, чтобы он включал только соответствующие значки для вашего приложения, используя параметр запроса
&icon_names, используя отсортированный в алфавитном порядке список имен значков (лигатур), разделенных запятыми.Не рекомендуется — при использовании настроек по умолчанию загружаются все более 3800 значков. Полезная нагрузка шрифта: 295 КБ.
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedРекомендуется — укажите имена значков, чтобы загружались только необходимые значки. Полезная нагрузка шрифта: 1,7 КБ.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockСоздайте экземпляр осей переменных шрифтов, чтобы включать только те, которые будет использовать ваше приложение. Большинству приложений требуется лишь несколько вариантов осей.
Не рекомендуется — при отсутствии конфигурации осей загружается статический шрифт по умолчанию (вес 400, оптический размер 24, округление 50, сорт 0, заливка 0). Полное включение всех осей переменных шрифтов обычно не требуется и увеличивает полезную нагрузку. Полезная нагрузка шрифта: 7,9 МБ.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Рекомендуется — используется определенная комбинация осей. Например, полная ось «ЗАПОЛНЕНИЕ» обеспечивает CSS-переходы между состояниями, а «ROND» 100 — это выбранный дизайн. Полезная нагрузка шрифта: 2,6 КБ.
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Самостоятельное размещение шрифта
Разместите шрифт значка в расположении, которым вы управляете, чтобы решить, когда обновлять ресурс. Например, если URL-адрес — https://example.com/material-symbols.woff , добавьте следующее правило CSS:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Чтобы правильно отобразить шрифт, объявите правила CSS для отрисовки значка. Эти правила обычно используются как часть таблицы стилей API Google Fonts, но при самостоятельном размещении их необходимо будет включать в проекты вручную:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
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;
}
Использование значков в HTML
В приведенных выше примерах используется типографская функция, называемая лигатурами , которая позволяет отображать иконку с использованием ее текстового имени. Веб-браузер автоматически заменяет текстовую лигатуру вектором значка и предоставляет более читаемый код, чем эквивалентная ссылка на числовой символ. Например, в вашем HTML у вас будет arrow_forward для обозначения значка вместо  . Для других значков используйте змеиный регистр имени значка (т. е. замените пробелы подчеркиванием).
Эта функция поддерживается в большинстве современных браузеров как на настольных, так и на мобильных устройствах. См . раздел «Могу ли я использовать поддержку лигатур», чтобы узнать, смогут ли ваши пользователи обрабатывать лигатуры, скорее всего, они смогут.
Если вам нужна поддержка браузеров, которые не поддерживают лигатуры, укажите значки, используя числовые ссылки на символы (так называемые кодовые точки), как показано в примере ниже:
Найдите имена значков и кодовые точки в библиотеке символов материалов , выбрав любой значок и открыв панель шрифтов значков. Каждый иконочный шрифт имеет индекс кодовых точек в репозитории Google Fonts git, показывающий полный набор имен и кодов символов.
Стилизация иконок в Material Design
Эти значки были разработаны в соответствии с рекомендациями Material Design и выглядят лучше всего при использовании рекомендованных размеров и цветов значков. Приведенные ниже стили позволяют легко применять рекомендуемые размеры, цвета и состояния активности.
Использование в Android
В библиотеке символов материалов все значки представлены в формате векторного рисования. Чтобы узнать больше, ознакомьтесь с документацией Android Vector Asset Studio .
Использование в iOS
Значки также доступны в формате символов Apple. Чтобы узнать о них больше, ознакомьтесь с официальным обзором символов Apple и руководством по их использованию .
Использование во Флаттере
Планируется поддержка Flutter для символов материалов. Следите за обновлениями.