Что такое материальные символы?
Символы материалов — это наши новейшие значки, объединяющие более 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 , мы можем загрузить весь переменный шрифт. Ознакомьтесь с поддержкой переменных шрифтов Can I Use, чтобы понять, смогут ли ваши пользователи загружать переменный шрифт. Скорее всего, да. Вот некоторые примеры:
Или даже анимируйте их!
Самостоятельное размещение шрифта
Разместите шрифт значка в расположении, которое вы контролируете, чтобы решить, когда обновлять ресурс. Например, если 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 для символов материалов. Следите за обновлениями.