Material Icons

Material Icons — это набор векторных значков (иконок), разработанный компанией Google и входящий в экосистему Material Design. Предназначен для использования в веб-интерфейсах, мобильных приложениях (Android, iOS) и десктопных программах. Иконки представляют собой масштабируемые векторные изображения, которые могут быть отображены в виде шрифта или в виде отдельных SVG-файлов. Набор включает более 2500 значков, охватывающих широкий спектр тем: от интерфейсных элементов (стрелки, кнопки, меню) до пиктограмм, обозначающих действия (удалить, сохранить, отправить), объекты (дом, телефон, книга) и состояния (ошибка, успех, предупреждение).

История

Разработка Material Icons началась одновременно с созданием языка дизайна Material Design в 2014 году. Первая публичная версия набора была выпущена в 2015 году. Изначально иконки поставлялись исключительно в виде веб-шрифта (формат TTF/OTF), что позволяло легко подключать их к сайтам через CSS. В последующие годы Google расширила форматы: появились отдельные SVG-файлы, шрифты в формате WOFF2, а также пакеты для интеграции в Android-проекты (через Gradle) и Flutter-приложения. В 2020 году набор был обновлён до версии Material Icons 2.0, в которой были добавлены новые стили (Outlined, Rounded, Sharp, Two-Tone) и улучшена поддержка адаптивной вёрстки.

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

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

Filled (заполненные) — классические иконки с однородной заливкой. Используются для основных элементов интерфейса (кнопки, панели навигации).
Outlined (контурные) — иконки, состоящие только из линий, без заливки. Применяются в ситуациях, где требуется лёгкость и ненавязчивость (например, в карточках товаров или в списках).
Rounded (скруглённые) — вариант с более мягкими, скруглёнными углами. Подходит для интерфейсов с округлыми формами (например, в мобильных приложениях с плавным дизайном).
Sharp (острые) — иконки с прямыми, угловатыми линиями. Используются в минималистичных или строгих интерфейсах.
Two-Tone (двухцветные) — иконки, в которых часть элементов окрашена в один цвет, а часть — в другой (обычно полупрозрачный). Создаёт эффект глубины и акцента.

Каждый стиль доступен в трёх размерах: 18px, 24px и 36px (по умолчанию — 24px). Также иконки можно масштабировать без потери качества за счёт векторной природы.

Технические характеристики

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

Веб-шрифт (CSS-шрифт) — наиболее распространённый способ подключения на сайтах. Иконки встраиваются в текст с помощью HTML-элементов  или  с классом material-icons. Шрифт загружается с серверов Google Fonts или из локального файла.
SVG — отдельные файлы в формате Scalable Vector Graphics. Используются для вставки в HTML напрямую (<svg>) или для импорта в векторные редакторы (Figma, Sketch, Adobe Illustrator).
PNG — растровые изображения для случаев, когда векторный формат не поддерживается (например, в старых версиях браузеров). Поставляются в нескольких размерах (от 18px до 48px).
Android-ресурсы — XML-файлы (векторные drawable) для Android-приложений. Подключаются через app:srcCompat или android:src.
Flutter-пакеты — Dart-классы, которые можно импортировать в проект Flutter (например, Icons.home).

Именование и кодировка

Каждая иконка имеет уникальное имя в формате snake_case (например, add_shopping_cart, arrow_back_ios). В веб-шрифте иконки кодируются в Unicode в диапазоне Private Use Area (PUA), что позволяет избежать конфликтов с обычными символами. В SVG-файлах имена задаются в атрибуте id или в названии файла.

Лицензирование

Material Icons распространяются по лицензии Apache License 2.0. Это означает, что их можно свободно использовать, модифицировать и распространять как в коммерческих, так и в некоммерческих проектах без указания авторства (хотя атрибуция приветствуется). Шрифтовая версия (Material Icons Font) также доступна под лицензией SIL Open Font License 1.1.

Применение

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

Для подключения Material Icons на веб-сайте достаточно добавить в <head> HTML-документа ссылку на CSS-файл Google Fonts:

``html <link href="https://fonts.googleapis.com/icon?family=Material+Icons"; rel="stylesheet"> ``

После этого иконки вставляются с помощью тега  с классом material-icons:

``html home ``

Для выбора стиля (Outlined, Rounded и т.д.) используется соответствующий класс, например material-icons-outlined. Также можно изменять размер, цвет и другие CSS-свойства.

Мобильная разработка (Android)

В Android-проектах иконки подключаются через зависимость в build.gradle:

``gradle implementation 'com.google.android.material:material:1.9.0' ``

Затем иконки используются в XML-разметке через атрибут android:src:

``xml <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_home" /> ``

В коде Kotlin или Java иконки доступны через класс MaterialIcons (например, MaterialIcons.Home).

Flutter

В Flutter иконки Material Icons встроены в фреймворк. Для использования достаточно импортировать пакет material.dart и указать имя иконки:

``dart Icon(Icons.home, size: 24.0, color: Colors.blue) ``

Flutter поддерживает все стили (Filled, Outlined, Rounded, Sharp, Two-Tone) через соответствующие классы, например Icons.outlined_home.

Дизайн-инструменты

Material Icons доступны для скачивания в виде SVG-файлов с сайта Google Fonts (раздел «Icons»). Также существуют плагины для Figma, Sketch и Adobe XD, которые позволяют вставлять иконки непосредственно в макеты.

Преимущества и ограничения

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

Масштабируемость — векторный формат обеспечивает чёткое отображение на любых разрешениях экрана (от Retina до 4K).
Единообразие — все иконки выполнены в едином стиле Material Design, что упрощает создание консистентных интерфейсов.
Бесплатность — лицензия Apache 2.0 позволяет использовать иконки без ограничений.
Широкая поддержка — иконки работают во всех современных браузерах, мобильных платформах и инструментах разработки.

Ограничения

Размер набора — более 2500 значков, что может быть избыточно для небольших проектов. Однако можно подключать только нужные иконки (например, через SVG-спрайты).
Зависимость от шрифта — при использовании веб-шрифта загрузка всех иконок (даже неиспользуемых) может замедлить начальную загрузку страницы. Для оптимизации рекомендуется использовать SVG-спрайты или подключать шрифт с выборочной загрузкой (например, через font-display: swap).
Стилистическая привязка — иконки строго следуют правилам Material Design, что может не соответствовать фирменному стилю некоторых проектов (например, с более сложной или нестандартной графикой).

Альтернативы

На рынке существуют другие популярные наборы иконок, которые могут использоваться вместо Material Icons или в сочетании с ними:

Font Awesome — набор из более 7000 значков, распространяемый по лицензии SIL OFL 1.1 (шрифт) и MIT (SVG). Отличается большим количеством стилей (Solid, Regular, Light, Duotone, Brands).
Ionicons — набор от команды Ionic Framework, оптимизированный для мобильных и веб-приложений. Включает около 1300 значков.
Feather Icons — минималистичный набор из 287 значков, распространяемый по лицензии MIT. Все иконки имеют одинаковую толщину линий (2px).
Bootstrap Icons — набор, разработанный для фреймворка Bootstrap. Включает более 1900 значков, распространяется по лицензии MIT.

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

Все иконки Material Icons изначально создаются в виде SVG-файлов с помощью инструмента Google Material Design Icon Generator. Затем они автоматически конвертируются в шрифты и другие форматы.
Набор включает не только стандартные пиктограммы, но и специализированные значки для медицинских, научных и образовательных тем (например, иконки для обозначения лабораторного оборудования).
В 2021 году Google выпустила обновление, в котором были добавлены иконки для обозначения темной темы (Dark Mode) и адаптивного дизайна.
Material Icons являются частью более крупной экосистемы Material Design, которая включает также компоненты (кнопки, карточки, диалоги) и анимации.

Источники

Google Material Design — официальная документация по Material Icons.
Google Fonts — раздел «Icons» с возможностью скачивания иконок.
Репозиторий Material Design Icons на GitHub (Google).
Статья «Material Design Icons: A Complete Guide» на сайте Material.io.
Документация Android по Material Components (Material Icons).

BFOmetr — база данных и аналитика по компаниям России.

На главную BFOmetr →