Material Symbols

Material Symbols — это набор иконографических символов с открытым исходным кодом, разработанный компанией Google в рамках дизайн-системы Material Design. Представляет собой эволюцию шрифтовых иконок Material Icons, предлагая более гибкую и настраиваемую систему векторных значков для использования в веб-интерфейсах, мобильных приложениях и других цифровых продуктах. В отличие от предшественника, Material Symbols поддерживают несколько визуальных стилей (вариаций толщины, заполненности, градации и размера) в рамках одного файла, что достигается за счёт использования технологии вариативных шрифтов (variable fonts).

История

Предпосылки создания

Первая версия иконок Material Design, известная как Material Icons, была представлена Google в 2014 году вместе с запуском самой дизайн-системы. Изначально иконки поставлялись в виде набора статических SVG-файлов и шрифтовых глифов, каждый из которых имел фиксированный стиль (например, «Filled» или «Outlined»). Для использования другого стиля требовалось подключать отдельный шрифт или файл, что усложняло разработку и увеличивало объём загружаемых данных.

Анонс и выход

В апреле 2022 года Google анонсировала Material Symbols как часть обновлённой версии Material Design 3. Основным нововведением стала поддержка вариативных шрифтов, что позволило объединить все стили (Filled, Outlined, Rounded, Sharp) в одном файле. Релиз состоялся в том же году, иконки стали доступны через Google Fonts, репозиторий GitHub и npm-пакет.

Классификация и стили

Material Symbols включают четыре основных визуальных стиля, каждый из которых может быть настроен по четырём осям вариативности:

Стили (вариации)

1. Filled — заполненные иконки, наиболее насыщенные и контрастные.
2. Outlined — контурные иконки, с тонкими линиями и пустым внутренним пространством.
3. Rounded — скруглённые иконки, с мягкими углами и линиями.
4. Sharp — острые иконки, с чёткими углами и минималистичным дизайном.

Оси вариативности

Каждый стиль может быть изменён по четырём параметрам:

• Weight (толщина) — от 100 (тонкий) до 700 (жирный).
• Grade (градация) — регулирует насыщенность и контрастность, от -25 до 200.
• Fill (заполненность) — от 0 (контурный) до 1 (полностью заполненный).
• Optical Size (оптический размер) — автоматически подстраивает детализацию под размер шрифта (от 20 до 48 пикселей).

Устройство и технические характеристики

Форматы поставки

Material Symbols распространяются в нескольких форматах:

• Вариативный шрифт (Variable Font) — один файл (например, MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf), содержащий все стили и оси. Поддерживается современными браузерами (Chrome, Firefox, Safari, Edge).
• Статические шрифты — отдельные файлы для каждого стиля и фиксированного значения оси (например, MaterialSymbolsOutlined-400.ttf).
• SVG-файлы — отдельные векторные изображения для каждого значка в каждом стиле.
• React-компоненты — библиотека @material-symbols/react-* для использования в проектах на React.

Количество иконок

По состоянию на 2024 год набор включает более 2500 уникальных значков, охватывающих широкий спектр тем: интерфейсные элементы, транспорт, медицина, образование, бизнес, погода, эмоции и другие.

Именование

Каждый значок имеет уникальное имя на английском языке, записанное в snake_case (например, add_circle, home, settings). Имена соответствуют семантике иконки и не зависят от стиля.

Применение

Веб-разработка

Material Symbols используются в веб-интерфейсах через подключение шрифта из Google Fonts или локальную установку. Пример подключения через CSS: ``css @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200'); ` После этого иконки вставляются как текст с классом .material-symbols-outlined: `html <span class="material-symbols-outlined">home</span> ``

Мобильные приложения

Для Android и iOS используются соответствующие библиотеки:

• Android: com.google.android.material:material-icons-extended (Gradle-зависимость).
• iOS: MaterialSymbols (Swift Package Manager или CocoaPods).

Дизайн-макеты

Иконки доступны в Figma, Sketch и Adobe XD через официальные плагины или библиотеки компонентов Material Design.

Преимущества и недостатки

Преимущества

• Гибкость: одна иконка может быть отображена в любом стиле без загрузки дополнительных файлов.
• Производительность: вариативный шрифт уменьшает количество HTTP-запросов и общий размер загружаемых данных по сравнению с набором статических SVG.
• Открытый исходный код: лицензия Apache 2.0 позволяет свободно использовать, модифицировать и распространять иконки.
• Актуальность: набор регулярно обновляется, добавляются новые значки.

Недостатки

• Зависимость от браузера: вариативные шрифты не поддерживаются в Internet Explorer и некоторых старых версиях браузеров.
• Сложность настройки: для точного управления осями требуется понимание CSS-свойств вариативных шрифтов.
• Ограниченная кастомизация: изменение формы иконки (например, добавление собственных элементов) требует перехода на SVG-редактор.

Примеры использования

Material Symbols применяются в таких продуктах Google, как Gmail, Google Drive, Google Maps, а также в сторонних проектах: веб-приложениях, мобильных играх, образовательных платформах и корпоративных системах. Например, значок search используется в строке поиска, menu — в гамбургер-меню, close — для кнопки закрытия.

Интересные факты

• Набор Material Symbols является наследником более старого набора Material Icons, который был выпущен в 2014 году и содержал около 900 иконок.
• Технология вариативных шрифтов, лежащая в основе Material Symbols, была впервые представлена в спецификации OpenType 1.8 в 2016 году.
• Google предоставляет онлайн-инструмент «Material Symbols & Icons» для поиска и скачивания иконок в различных форматах и стилях.

Критика

Некоторые разработчики отмечают, что использование вариативных шрифтов может приводить к неожиданному поведению в старых браузерах, а также к увеличению времени загрузки страницы при неправильной настройке. Кроме того, отсутствие поддержки анимации внутри шрифта (например, вращения или пульсации) ограничивает динамическое использование иконок без дополнительного CSS или JavaScript.

Источники

• Google Material Design Documentation — «Material Symbols» (2022).
• Google Fonts — «Material Symbols Guide» (2023).
• Репозиторий GitHub «google/material-design-icons» (2014–2024).
• Статья «Introducing Material Symbols» на блоге Google Design (апрель 2022).
• Спецификация OpenType 1.8 (Microsoft, 2016).