Что это такое
Material Design Icons — официальный репозиторий Google с иконками Material Design. Он нужен не только дизайнерам: разработчики подключают эти символы в веб-приложениях, мобильных приложениях и документации.
Проект появился как часть Material Design, где иконки являются языком действий и состояний. Одинаковая корзина, поиск, меню или предупреждение помогают пользователю быстрее понимать интерфейс.
Что внутри репозитория
Репозиторий содержит наборы иконок, метаданные, варианты начертаний, SVG-ресурсы и инструкции подключения. В последние годы важную роль играют Material Symbols: семейство, где можно настраивать вес, заливку, размер и оптическую коррекцию.
Для продукта это удобно: одна система иконок может жить в макетах, коде и документации. При этом команда не вынуждена рисовать базовые пиктограммы сама.
Как используют
В вебе иконки часто подключают как шрифт или SVG, в Android — через ресурсы и компоненты платформы, в дизайне — через библиотеки. Важно выбрать один способ подключения и не смешивать несколько наборов без необходимости.
Для брендов с сильной визуальной системой стандартные иконки могут выглядеть слишком узнаваемо. Тогда Material Design Icons используют как базу для внутренних прототипов или как источник понятных метафор.
Сильные стороны и ограничения
Сильная сторона — огромный узнаваемый набор и поддержка разных платформ. Иконки экономят время и уменьшают количество спорных самодельных символов.
Ограничение — универсальность. Если интерфейс должен иметь уникальный характер, готовые иконки придется аккуратно сочетать с собственной графикой.
При работе с иконками полезно заранее определить правила: когда символ сопровождается текстом, когда скрывается от скринридера, какой размер используется в кнопках и как отображаются состояния. Без таких правил даже хороший набор быстро превращается в визуальный шум.
Material Design Icons особенно удобен для прототипов и систем с привычной навигацией. Пользователь уже видел многие метафоры в Android и веб-приложениях, поэтому интерфейс меньше объясняет себя словами и быстрее читается глазами.
Пример
Подключение Material Symbols в HTML
Пример показывает простой вариант для веб-страницы: подключить шрифт и вывести символ по имени.
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
<span class="material-symbols-outlined" aria-hidden="true">
search
</span>