Материал дизайн иконки: Material Design Icons

Material Design на русском. Часть 23 — Системные Иконки | by Ruslan Sharipov | Дизайн-кабак

Привет. Меня зовут Руслан. Я UX/UI дизайнер в Siemens. У меня есть ютуб-канал, на котором записано несколько плейлистов по основам UX/UI дизайна. В этой серии постов однако я просто делюсь вольным переводом Material Design на русский язык. Оригинальный источник: здесь.

Контекст

Системные иконки разработаны так, чтобы быть простыми, современными, дружелюбными, а иногда и причудливыми.

Формы иконок насыщенные и геометрические. Они симметричны, консистенты, читабельны и четкие даже при маленьких размерах.

Правильно: графично и насыщенноНеправильно: не используй декоративные элементы для украшательства и тонкие обводкиПравильно: простая геометрия и консистентная формаНеправильно: органические формы

Шаблон

Шаблон для Adobe Illustrator, который поможет спроектировать системные иконки по 24dp сетке.

Размер иконок

Системные иконки имеют размер 24 x 24 dp. Проектируй иконки в 100% масштабе, то есть 1:1, чтобы всё было пиксель-пёрфект.

100% масштаб 1:11000% масштаб 1000:1

Плотность макета

На десктопе, когда мышь и клавиатура являются основными методами ввода, размеры иконок могут быть уменьшены до 20dp.

100% масштаб 1:11000% масштаб 1000:1

Содержимое иконок должно оставаться внутри рабочей области.

Если требуется дополнительный визуальный вес, то содержимое можно увеличить и зайти за пределы рабочей области. Ни одна часть иконки не должна выходить за пределы итогового контейнера.

Рабочая область, в которой надо нарисовать иконку ограничена размером 20x20dp внутри контейнера 24x24dpВнутренний отступ (padding) — от границ контейнера отступи 2dpКомпактная рабочая область может быть меньше. Например, если иконка 20x20dp, то рабочая область будет 16x16dp с внутренним отступом 2dpВнутренний отступ для компактного вида = 2dp

Сетка иконки и контуры

Сетка системной иконки имеет четкую и согласованную систему, при которой можно гибкого позиционировать элементы.

Эти контуры основаны на сетке. Используя их в качестве базы, ты можешь поддерживать консистентные пропорции во всех иконках.

Базовые формы

Контуры превращаются в стандартные формы: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эти формы нужны для унификации иконок в системе Google и для поддержания согласованности в сетке.

СеткаКонтурыКвадрат размером 18x18dp по высоте и ширинеКруг размером 20x20dp по высоте и ширинеВертикальный прямоугольник размером 16dp по ширине и высоте 20dpГоризонтальный прямоугольник 20dp на ширине и 16dp на высоте

Геометрия

Ниже примеры того, как ключевые контуры и формы превращаются в универсальные, простые и консистентные системные иконки Google.

Иконка «копировать»Иконка «камера»

Чёткость и пиксель-пёрфект

Чтобы избежать искажения иконки, расположи элементы “пиксель в пиксель”, указав координаты X и Y с помощью целых чисел, без десятичных знаков.

Правильно: позиционирование по сетке «пиксель в пиксель»Неправильно: не размещай элементы в дробные позиции, а также не используй дробные значения для масштаба.

Адаптация под другие платформы

Android. Кнопка назад имеет тонкую по обводке стрелку.iOS. На iOS стрелка толще и не имеет окончания.iOS. В iOS стрелка назад также может содержать надпись, которая соответствует пункту назначения.Android. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три вертикальные точки.iOS. Иконка, которая показывает меню с дополнительными пунктами меню (обозначенный иконкой «Еще…») содержит три горизонтальные точки.

Анатомия

1 — Штрих. 2 — Угол. 3 — Контрформа (внутреннее пространство). 4 — Обводка. 5 — Внутренний угол. 6 — Контейнер иконки

Углы

По умолчанию радиус скругления углов равен 2dp. Внутренние углы должны быть квадратными, а не закругленными. Для форм шириной 2dp или меньше штрих не должен быть закруглен.

Наружные углы со скруглением 2dpВнутренние углы без скругления

Обводка

Системные иконки имеют обводку размером 2dp, везде.

2dpКонсистентность вездеКонечные штрихиВнутреннее пространствоПравильно: используй одинаковые размеры в обводках и прочих элементах иконокНеправильно: использовать разные формы и толщины у элементов.

Сложные по форме иконки

Если ты проектируешь системную иконку со сложными деталями, то можно сделать обводку чуть тоньше, чтобы улучшить разборчивость. Такие манипуляции называются оптические правки. Любая такая правка должна все равно использовать геометрические формы, на которых основаны все остальные иконки.

Сложные формы. У иконки «скрепка» исползуется 1.5dp ширина обводки, чтобы кривые формы читались лучше.Малый масштаб. Иконка выше также использует обводку размером 1.5dp для отображения дыма у сигареты.Правильно: рисуй иконки фронтальноНеправильно: не поворачивай, не наклоняй и не изменяй форму объектовПравильно: упрощай иконки для лучшей ясности и читабельности. Неправильно: не перегружай иконку. Избегай сложных форм.

Пространство

Размер кликабельной области равен 48dp. В эту кликабельную зону ты помещаешь иконку 24dp. Это нужно, чтобы дать достаточное пространство, чтобы поддержать читабельность и чтобы было удобно нажимать на иконку.

1 — Кликабельная зона. 2 — Размещение.

Плотность (на Desktop)

Когда мышь и клавиатура являются основными методами ввода, размер контейнера иконки можно поджать. Иконки 20dp можно уместить в кликабельную зону размером 40dp.

1 — Кликабельная зона. 2 — Размещение

Иконки на светлом фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 87% (#000000). Прозрачность иконки вне фокуса равна 54%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 38% (#000000).

Иконки на тёмном фоне

Активное состояние иконки
Стандартная прозрачность активной иконки с фокус-состоянием на светлом фоне равна 100% (#FFFFFF). Прозрачность иконки вне фокуса равна 70%.

Неактивное состояние иконки
Неактивная иконка, которая ниже предыдущих по визуальной иерархии, должна иметь прозрачность равную 58% (#FFFFFF).

Для создания уникальных системных иконок можно использовать три атрибута: обводку и заливку, радиус угла и цвет.

Следующие 4 примера иконок получились путем работы с этими атрибутами.

Линейные иконки

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

Обводка или заливка

Если ты не заливаешь иконки цветом, то используетеся обводка. Регулируй толщину обводки, чтобы передать какой-то стиль или ощущение. Иконки же с заливкой кажутся визуально тяжелее.

Без заливкиС заливкойЧтобы иконка была читаемой, рекомендуемая толщина обводки 2dp2dp обводка это стандарт также и для линейных иконок во всех приложениях и размерах.

Про выравнивание обводки

Положение обводки влияет на внешний вид иконки. Чаще всего иконки рисуются с обводкой внутрь.

1 — Material иконка по умолчанию. 2 — Обводка внутрь. 3 — Обводкапо центру. 4 — Обводка наружу.Выравнивание обводки по внутренней части фигуры лучший вариант для создания иконок и передачи читаемости.Для читаемости и распознаваемости в некоторых случаях стоит придерживаться стиля иконок Material по умолчаниюОсторожно: хотя в большинстве случаев нужно выравнивать обводку внутри, иногда все же нужно делать это по центру или использовать внешнее выравнивание для лучшей читаемостиПравильно: если тебе кажется, что иконку стоит скорректировать, то сделай это используя настройки обводкиТонкая обводка у иконок подчёркивают бренд1 — Логотип. 2 — Линейные иконки в приложении. 3 — Сет иконок.

Острые или заострённые углы

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

Скруглённые углы
Скругленные иконки хорошо сочетаются с продуктами, в которых используется насыщенная типографика, изогнутые логотипы или округлые элементы.

Радиус скругления
Радиус угла у иконки может быть больше или меньше — все зависит от тебя.

Рекомендуемое значение скругления от 0 до 4dp.Если обводка равна 2dp или меньше, то радиус угла должен быть равен 1dpМеняй внутренние углы и размер в соответствии с радиусом углаПравильно: меняй радиус, чтобы иконка оставалась разборчивой и передавала стиль брендаОсторожно: не скгруляй внутренние углы если это понижает читаемость иконкиЗначение 0dp у иконок для скругления поддерживается прямоугольными элементами дизайна этого приложения1 — Логотип. 2 — Иконки острые. 3 — Сет иконок.у этого приложения закругленные кнопки и линейный иконка-логотип.1 — Логотип. 2 — Сет скругленных иконок. 3 — Использование сета иконок в приложении.

Двухцветные иконки

Двухцветные иконки передают глубину, используя как обводку, так и заливку цветом. Цвет обводки и заливки помогает передать всю полноту бренда и использовать несколько фирменных цветов, что также может улучшить читаемость.

1 — Обводка (рекомендация по размеру: 2dp). 2 — Заливка с прозрачностьюПрозрачность применяется только к какой-то области заливки.

Двухцветные иконки дают тебе возможность использовать разные цвета для обводки и заливки иконки. Прозрачность заливки можно регулировать, чтобы улучшить читаемость и привести ее в соответствие с брендом.

Обводка иконок должна быть со значением прозрачности равной 87% на светлом фоне и 100% на темном. Цвет заливки может варьироваться в зависимости от тона фона.

В этом интерфейсе используется двухцветные иконки. В данном примере это лого.1 — Лого. 2 — Сет иконок. 3 — Использование иконок в приложении.

• Структуированный документ в Notion
• Официальные обновления Google на странице what’s new

иконки — Дизайн на vc.ru

Подготовка иконок к работе в дизайн-системе.

16 111 просмотров

Кто я и почему об этом пишу?

Привет, меня зовут Андрей Насонов, я UI/UX-дизайнер, работаю руководителем дизайн отдела в Elonsoft. Мы создаём программные продукты и помогаем компаниям из разных отраслей масштабировать свой бизнес.
Я занимаюсь дизайном с 2008 года, начинал как графический дизайнер, но с 2015 года работаю веб-дизайнером.

Мне интересна разработка сервисного дизайна, проектирование дизайн-систем и автоматизация дизайн- и бизнес-процессов.

В этой серии статей я хотел бы поделиться своим опытом построения дизайн-систем и предложить несколько идей по автоматизации. В первой статье мы поговорим на довольно простую, но важную тему — иконки. Поехали!

Помещайте иконки во фреймы

Поскольку все иконки разного размера в силу своих геометрических особенностей, все они должны быть помещены во фреймы одинакового размера.

Допустим, у нас три иконки: 22x15px, 18x20px и 10x5px. Каждая из них должна быть во фрейме 24x24px.

Оставлять иконки без фрейма нельзя!

Всегда помещайте иконки во фрейм

Экспортировать иконки нужно также во фрейме.

Важно! Экспортировать нужно именно иконку во фрейме, а не слой иконки. После чего помещать ее уже в контейнер 24x24px.

Причем важно делать именно в такой последовательности, поскольку дизайнер зачастую выравнивает иконку изнутри фрейма по визуальному центру, а не по геометрическому. Разработчик же зачастую выравнивает иконку по геометрическому центру не замечая разницы.

Иконка выровнена по геометрическому центру. Отступы: слева и справа по 10px. Но из-за особенностей формы иконки возникает ощущение, что она сдвинута влево.

Иконка выровнена по визуальному центру. Отступы: слева 12px, справа 8px. Иконка специально сдвинута вправо, чтобы визуально казалось, что иконка располагается по центру.

Компонент из фрейма с иконкой

Создайте компонент из фрейма с иконкой.

Компонент из фрейма с иконкой

Это поможет вам быстро заменить одну иконку на другую, использовав функцию «Instance».

Чтобы замена через инстанс сработала, компоненты иконок должны находиться в одном фрейме (об этом дальше).

Замена иконок с помощью функции «Instance»

Иконки лучше всего именовать на английском. Если вы скачали иконку, а у нее уже есть название на английском — не переименовывайте ее.

Так вы быстрее запомните название иконок и будете легко находить на тех ресурсах, где их берете.

Заодно и новые слова на английском выучите, если у вас с ним беда, как и у меня. 😄

Хранение иконок

Статья 224, лишение свобод…… .. ладно 😄

Один проект может содержать иконки разных размеров. Например, стандартные 24x24px, 16x16px или 20x20px для элементов меньшего размера.

Основные иконки 24x24px мы храним в артборде «Icons 24». Остальные иконки размер которых больше или меньше 24px храним в «Other Icons». Обычно их не очень много.

Артборд «Trash Icons» нужен чтобы хранить в нем различные варианты иконок.

Например, вы подобрали или нарисовали три иконки чата, выбрали из них одну и поместили ее в артборд «Icons 24», а другие два варианта иконки перемещаете в артборд «Trash Icons». На случай, если вы передумаете и захотите изменить свой выбор вам не придется искать их снова.

Фон и цвет

Чтобы при выделении компонентов с иконкой в настройках Fill не отображались лишние цвета — удалите у компонента белый фон, даже если он отключен.

Так же рекомендую сразу применять к иконке стиль цвета, чтобы при дальнейшей работе было удобнее менять цвет иконки.

Удаление фона и применение стиля цвета

Стиль цвета нужен чтобы при замене через инстанс вы не забывали перекрашивать иконку в нужный цвет.

Советую выбрать броский цвет, который вы очень редко используете на проекте. Оставляя иконку черной или серой есть вероятность что вы будете забывать ее перекрашивать. Я выбрал коричневый.

Яркий цвет иконки четко дает понять, что после замены ее нужно перекрасить в нужный стиль.

Констрейнтс

Настройте у слоя с иконкой constraints по вертикальному и горизонтальному центру. Это нужно на случай, если вы захотите уменьшить или увеличить компонент иконки, но так чтобы сама иконка не меняла свой размер.

Важно! Сonstraints нужно настраивать именно у слоя с иконкой, а не у всего компонента.

Настройка constraints

Массовые действия с иконками

Все вышеописанные действия можно проделать с несколькими иконками сразу.

Для того, чтобы выбрать слои с иконкой сразу во всех компонентах иконок — выберите все компоненты иконок и нажмите Enter.

Мусор в иконках

Во фрейме компонента кроме иконки ничего не должно быть. Не забывайте удалять все скрытые слои из фрейма с иконкой.

Например, Material Design иконки имеют белый фоновый слой.

В итоге компонент иконки должен содержать только один слой (слой с иконкой). Но могут быть и исключения, например, двухцветные иконки.

В случае с одноцветной иконкой — все элементы должны быть объединены в один слой.

После того, как вы объединили слои, не забывайте применять «Outline Storke» к объединенной фигуре.

Объединение иконки в один слой

Все это нужно для того, чтобы иконки меньше весили, SVG код был гораздо меньше и понятней, а у разработчиков не возникли проблемы с перекрашиванием иконок.

Так выглядит SVG-код иконки, когда компонент иконки имеет несколько слоев и они не объединены в один. Код получился очень длинным и имеет целых 7 параметров «Fill» для разных элементов иконки. Так делать нельзя.

Размер файла иконки 1318 байт

А так выглядит SVG-код иконки, когда все слои объединены. Код гораздо меньше и имеет всего 2 параметра «Fill». Один для фона контейнера, другой для цвета иконки. Так делать можно.

Размер файла иконки 803 байта

После экспорта иконки вы можете ее дополнительно сжать используя этот сайт.

После сжатия код иконки стал еще меньше, но внешний вид иконки не изменился.

Размер файла иконки 508 байт

Ресурсы с иконками

Ну и напоследок несколько ресурсов откуда можно брать иконки.

Material Design Icons Community
Огромный набор иконок, который содержит официальные иконки Material Design, а также иконки созданные сообществом по гайдам Material Design. На мой взгляд, это лучший набор на данный момент. Он покрывает 90% моих потребностей.
В Figma есть специальный плагин.

Material Design Icons
Официальные иконки Material Design. К сожалению, на этом сайте иконки имеют довольно странные тэги. Из-за этого некоторые иконки нереально найти через поиск. Да и файл иконки содержит в себе лишний слой с белым фоном, который на мой взгляд, не нужен.

Плагин в Figma.

Boxicons
Есть хорошие альтернативы иконкам из предыдущих ресурсов. Но не все иконки pixel perfect.
Так же имеется плагин в Figma.

Бесплатная векторная графика Material Design Icons

Данный веб-сайт использует файлы cookie. Продолжение просмотра данного веб-сайта означает ваше согласие на использование файлов cookie и других технологий отслеживания. Подробности здесь

Got it!

Скачать

пользовательский интерфейс

значок

пользовательский интерфейс

материал дизайн

Аналогичная Бесплатная Графика

• Angle with the three-dimensional shape of the arrow

• Logo template

• Icon more than a simple vector graphics material

• Variety of vector graphics logo material

• House with 2 sets of utility icon

• Dialogue and simple icon

• Facebook style icon

• Crystal Icon Style Vector Graphics Simple Material

• Green Style, Vector Icons Web Design Commonly Used Material

• Orange-Gray Web Icons Vector Design Decoration Material

• Simple Cartoon-Style Vector Icons Web Design Commonly Used M

• Cartoon-Style Icons Web Design Commonly Used Material

• Web Design Gray Green Purple Icon

• Number Of Logo Template Vector Graphics Material

• Variety Of Vector Graphics Logo Material

• Icon More Than A Simple Vector Graphics Material

• Web Design Decorative Crystal Material Vector Style Icon

• The Colorful Circular Button Crystal Material

• Web Design Decorative Crystal Material Vector Style Icon

• Facebook Style Icon

• Package Of Blue-Gray Combination Of Simple Icons

• Crystal Style Button Vector Material Buttons Icons Downloads

• Cube decoration design materials icons

• Плоские Рождественский Icon Set (PSD)

• Web2. 0 веб-дизайн с квадратный значок

• Угол круглый значок

• значок птицы щебетать

• Утилизировать ОСЧС Икона Set

• Веб-дизайн элементов векторного материала часто используемых кнопок

• Значок кнопки радио

• Пакет из серо голубой комбинации простых иконок

• Значок кнопки привлекательный веб дизайн

• Веб-дизайн декоративные хрустальные материала вектор икона стиля

• Дизайн меню переходов страницы

• Простые линии целого ряда практических маленький значок

• Практические значок

• Простой мультфильм стиле векторные иконки веб-дизайн широко используется m

• Практические веб дизайн элементы 04-вектор материала веб дизайн иконок ярлыков

• Практические веб дизайн элементы 02-вектор материала веб дизайн иконок ярлыков

• практические веб-векторные иконки

Смотреть все

Материальный дизайн — перевод официальной спецификации Google

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

Перевод официальной документации Google: http://www.google.com/design/spec/material-design/.

Цели

Создать визуальный язык, который бы сочетал в себе классические принципы хорошего дизайна с инновациями и возможностями технологий и науки.

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

Принципы

Материал — это метафора

Метафора материала — это теория, объединяющая рациональное использование пространства и систему движений. Основой материала является осязаемая действительность, основанная на изучении бумаги и чернил, но при этом являющаяся продвинутой технологически и открытой для воображения и магии.

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

Фундаментальные принципы света, поверхности и движения позволяют передать, каким образом объекты двигаются, взаимодействуют и существуют в пространстве и относительно друг друга. Реалистичное освещение демонстрирует линии стыка, разделяет пространство и обозначает движущиеся части.

Четкий, наглядный, интуитивный

Фундаментальные элементы дизайна, ориентированного на печать — типография, сетки, пространство, масштаб, цвет и использование визуальных образов — задают направление визуальным решениям. Эти элементы не просто радуют глаз. Они создают иерархию, смысл и центр внимания. Тщательно обдуманный выбор цвета, состыкованные визуальные образы, крупномасштабная типография и намеренное использование большого количества свободного пространства создают интуитивный графический интерфейс, погружающий пользователя в мир восприятия.

Упор, сделанный на действия пользователя, позволяет немедленно донести до него базовый функционал и предоставляет пользователю необходимый маршрут.

Движение открывает смысл

Движение уважает пользователя и делает его основной движущей силой. Основные действия пользователя — это переломные моменты, которые инициируют движение, полностью преобразуя дизайн.

Все действия происходят в одной среде. Объекты предстают перед пользователем, не нарушая непрерывность потока его впечатлений, даже когда они трансформируются и перегруппировываются.

Движение несет смысл и цель, позволяя сфокусировать внимание и сохранить непрерывность. Обратная связь едва различима, но при этом понятна. Переходы эффективны, и при этом связаны друг с другом.

Трехмерный мир

Материальная среда является трехмерным пространством, а это значит, что все объекты располагаются в плоскостях x, y и z. Ось z расположена перпендикулярно плоскости отображения, и ее положительная шкала направлена на зрителя. Каждый лист материала занимает единицу пространства на оси z и имеет стандартную толщину 1dp.

Свет и тень

В материальной среде виртуальные источники света освещают сцену и позволяют объектам отбрасывать тень. Основной источник света создает направленные тени, а общий свет дает единые мягкие тени под всеми углами.

Все тени в материальной среде создаются двумя вышеуказанными источниками света. Тени — это отсутствие света, возникшее из-за того, что лучи света от этих источников перекрываются листами материала на разных участках оси z.

Тень, отбрасываемая от основного источника света

Тень, отбрасываемая от общего источника света

Комбинированная тень от основного и общего источника света

Материал обладает некоторыми неизменными характеристиками и характерной линией поведения. Понимание этих свойств поможет вам манипулировать материалом в соответствии с концепциями материального дизайна.

Физические свойства

Материал обладает изменяющимися размерами по осям x и y (измеряются в dps) и единой толщиной (1dp). Толщина материала не может быть равной 0.

Правильно

Высота и ширина материала могут изменяться.

Неправильно

Толщина материала всегда равна 1dp.

Материал — единое целое.

События ввода не могут пройти сквозь материал.

Правильно

Неправильно

Несколько элементов материала не могут одновременно занимать одну и ту же точку в пространстве.

Правильно

Неправильно

Материал не может проходить сквозь другой материал.

К примеру, один лист материала не может пройти сквозь другой лист при изменении его высоты.

Неправильно

Между организацией объектов в реальном мире и в их расположении в материальном пространстве существуют параллели. В реальном мире объекты могут накладываться друг на друга, но не могут проходить сквозь друг друга. Объекты могут отбрасывать тени и отражать свет.

Эти свойства применимы и к объектам в материальном дизайне. Они помогают создать пространственную модель, которая может повсеместно применяться в приложениях знакомыми пользователям способами.

Высота

Высота — это относительное положение объекта на оси z его родителя. Высота — это относительная величина между родительским и дочерним объектом.

Высота измеряется в тех же единицах, что и оси x и y: обычно в не зависящих от плотности пикселях (density independent pixels, dp). Поскольку стандартная толщина материала составляет 1 dp, все высоты рассчитываются, как разность расстояний от одной верхней плоскости до другой.

Высота в состоянии покоя

Все материальные объекты имеют высоту в состоянии покоя, независимо от того, является ли объект небольшим компонентом или листом, занимающим весь экран.

Примеры типовых высот компонентов в состоянии покоя.

В статичном положении высота объекта в состоянии покоя не изменяется. Она едина для всего приложения. Если высота объекта изменяется, он должен как можно быстрее вернуться на свою высоту в состоянии покоя.

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

Отзывчивая высота и динамические сдвиги по высоте

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

Динамические сдвиги по высоте происходят относительно положения компонента в состоянии покоя, и выступают в роли цели, к которой должен передвинуться компонент в том или ином своем состоянии. Кроме того, они обеспечивают постоянство изменений для заданного действия соответствующего типа компонентов. К примеру, у всех компонентов, которые поднимаются при нажатии, происходит одинаковое изменение высоты, относительно их текущей высоты / высоты в состоянии покоя.

После завершения события ввода или в случае его отмены компонент возвращается на свою высоту в состоянии покоя.

Функциональные тени

Тени предоставляют несколько важных визуальных подсказок о расположении объектов в пространстве. Тени являются единственным визуальным средством, указывающим на величину расстояния между поверхностями. Высота объекта определяет визуальный облик его тени.

Без тени ничто не может указать, что поверхность свободно подвешенной кнопки действия расположена отдельно от поверхности фона.

Резкие тени указывают, что подвешенная кнопка действия и панель приложения являются отдельными поверхностями, расположенными очень близко к фоновой поверхности.

Более мягкая и крупная тень указывает, что свободно подвешенная кнопка имеет большую высоту, чем панель приложения.

При движении тени также предоставляют подсказки о направлении движения объекта. Это еще один полезный инструмент, позволяющий определить, уменьшается или увеличивается расстояние между поверхностями.

Без тени, указывающей высоту, становится неясно, изменяет ли эта окружность свои размеры, находясь на одной высоте, либо она просто увеличивает свою высоту.

Тень увеличивается в размерах и становится мягче с увеличением высоты объекта. Она становится четче и меньше в размерах при уменьшении высоты.

В данном случае постоянство тени позволяет пользователю понять, что объект изменяет свою форму, а не высоту.

Связи между объектами

Способ организации объектов в приложении определяет характер перемещения объектов или коллекций объектов по отношению друг к другу. Объекты могут двигаться независимо друг от друга, либо их движение может быть ограничено и зависеть от содержащего их элемента. Контейнеры и объекты, которые они содержат, имеют связь «родительский элемент — дочерний элемент». У каждого объекта есть один родитель, и он может иметь либо не иметь потомков.

Дочерние элементы наследуют от своих родителей характеристики трансформаций, такие как положение, поворот и высота. Например, в случае прокрутки коллекции карточек, все карточки двигаются вместе. Карточки являются соседями, и все они являются дочерними элементами контейнера коллекции карточек, который выполняет движение прокрутки.

Иерархия родительских и дочерних элементов определяет способ взаимодействия объектов и групп объектов друг с другом. К примеру, дочерние элементы имеют минимальную разницу в расстоянии по оси z со своими родителями. Ни один посторонний объект не может быть помещен между родительским и дочерним объектом.

Приподнятая кнопка (дочерний элемент) уходит за пределы экрана при прокрутке содержимого ее родителя.

Карточки (соседи и дочерние элементы коллекции карточек) уходят за пределы экрана, а свободно подвешенная кнопка (свой собственный родитель) остается на своем месте.

Осознание осязаемости формы объекта позволяет нам понять, как манипулировать им. Наблюдение за движением объекта позволяет нам понять, легкий он или тяжелый, гибкий или жесткий, маленький или большой. Движение в мире материального дизайна не просто красиво, оно доносит смысл расположения объектов в пространстве, возможностей и намерений системы.

Масса и вес

Физические объекты имеют массу и движутся только в случае воздействия на них сторонних сил. Следовательно, объекты не могут мгновенно начинать или прекращать движение. Анимация, в которой движения начинаются или прекращаются внезапно, а направление движения резко изменяется, выглядит неестественной и может сбить пользователя с толку.

Критический аспект движения в материальном дизайне — сохранить ощущение физической формы, не теряя при этом элегантность, простоту, красоту и магию цельного восприятия пользователя.

Особые случаи: Вход и выход из кадра

Проследите, чтобы при попадании объекта в кадр он двигался со своей пиковой скоростью. Такое поведение имитирует естественное движение. Человек, входящий в видимую область, начинает ходьбу не от края этой области, а за ее пределами. Точно так же и при выходе объекта из кадра необходимо сохранять его скорость, а не снижать ее в момент выхода. Когда объект медленно входит и выходит из кадра, он привлекает внимание пользователя. В большинстве случаев вы будете ожидать другого эффекта.

Внесение поправок

Не все объекты двигаются одинаково. Более легкие/маленькие объекты могут ускоряться/замедляться быстрее, потому что обладают меньшей массой и требуют для этого меньшего усилия. Более крупным/тяжелым объектам может понадобиться больше времени, чтобы достигнуть пиковой скорости и перейти в состояние покоя. Подумайте о том, как это отражается на разных элементах UI в вашем приложении, и решите, как следует представить их движение.

Отзывчивое взаимодействие создает доверительную связь с пользователем и вовлекает его. Когда пользователь взаимодействует с приложением и видит, как происходят прекрасные и абсолютно логичные вещи, он чувствует удовлетворение и даже восторг. Взаимодействие имеет смысл и цель, оно не происходит произвольно, оно может быть причудливым, но не отвлекает пользователя. Оно заставляет глубже исследовать приложение. Что произойдет, если я прикоснусь вот сюда? А потом сюда?

Ввод данных пользователем

В материальном дизайне приложения отвечают на ввод данных пользователем и с нетерпением ждут его:

• Жесты, голос, мышь и клавиатура — всё это превосходные методы ввода.
• Несмотря на то, что элементы UI кажутся осязаемыми, они заперты под слоем стекла (экраном компьютера или мобильного устройства). Визуальные подсказки и движение элементов помогают устранить эту брешь, мгновенно воспринимая ввод данных и подразумевая непосредственное управление.

Отзывчивое взаимодействие отличает приложение от чего-то, что предоставляет пользователю информацию при отправке запроса устройству, общающемуся с пользователем при помощи жестов.

Реакция поверхности

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

Основным визуальным механизмом для выражения этой связи является «Рябь от прикосновений». Этот прием четко определяет начало и продолжительность события касания, а также его динамические аспекты, такие как амплитуда голоса или проанализированная сила нажатия при касании.

Передовые методы

Ввод данных происходит в определенных точках: в точке касания пальца или у иконки микрофона (в случае голосового ввода). Начиная с этой точки, визуальную реакцию следует сделать радиальной.

Реакция материала

Помимо действий на поверхности, напоминающих краску, материал сам по себе тоже может реагировать на события. Материал может подниматься при нажатии, указывая на свое активное состояние. Пользователь может создавать новый или изменять существующий материал с помощью касаний либо с помощью прямого управления листами материала, перетаскивая или отбрасывая их.

Точка появления

Если в результате прямого взаимодействия с пользователем создается новый материал, движение увеличения поверхности должно начинаться от точки начала ввода.

Подъем при касании

При активировании карточки или отделяемого элемента, карточка должна приподниматься, указывая на свое активное состояние.

Радиальное воздействие

Все действия, инициированные пользователем, имеют эпицентр; место или места, в которых его замысел попадает в систему. Для добавления ясности событиям, инициированным пользователем, создайте прочные визуальные связи с вводом данных пользователем, будь то ввод пальцами через тачскрин или голосом через микрофон. Изменения состояния на экране должны происходить постепенно по мере удаления от точки соприкосновения, создавая «рябь» из действий.

События ввода имеют эпицентр. Касание происходит в точке соприкосновения, голос попадает внутрь через иконку микрофона, клавиатура — через отдельные клавиши.
Действия должны быть связаны визуально с соответствующим эпицентром ввода. Действия, расположенные ближе, должны происходить быстрее, чем дальние, создавая «рябь» из действий (движение происходит на расстоянии от эпицентра).

Иногда пользователю трудно определить, куда нужно смотреть. Ему бывает неясно, как элемент попал из точки А в точку Б. Тщательно скоординированный дизайн движений может фактически управлять вниманием пользователя на протяжении множества шагов процесса или процедуры, позволяет избежать путаницы при изменении структуры или перемещении элементов, и в целом делает восприятие еще приятнее. Дизайн движений должен служить функциональной цели.

Визуальная целостность

Переход между двумя визуальными состояниями должен быть понятным, плавным и непринужденным, он не должен сбивать пользователя с толку. Правильно спланированный переход берет на себя всю «тяжелую работу» и позволяет пользователю четко понять, на чем следует сфокусировать свое внимание. Переход состоит из трех категорий элементов:

Входящие элементы — вновь созданные или перемещенные в сцену, эти элементы требуют повторного представления или размещения на новом месте.
Исходящие элементы — элементы, которые больше не имеют отношения к новому контексту и должны быть убраны из сцены надлежащим образом.
Общие элементы — элементы, существующие на протяжении всего перехода. Они могут быть едва заметными (например, отдельная иконка) или занимать доминирующее положение (изображение из галереи, занимающее всю площадь экрана).

Важные аспекты

Создавая анимации, учитывайте следующие моменты:

• Подумайте, каким образом следует направлять внимание пользователя. Какие элементы и движения выполняют эту задачу? Каким образом привлекать и отводить внимание от входящих, исходящих и общих элементов в процессе перехода?
• Обдумайте переходы, проектируя расположение элементов на экране, и найдите возможности для создания визуальных связей между переходящими состояниями с помощью цвета и общих элементов.
• Добавленные движения должны быть осмысленны: подумайте, каким образом движение определенного элемента добавляет ясность и создает удовольствие от перехода.

Иерархическая синхронизация по времени

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

Однако это не просто формула, по которой самая важная вещь начинает движение первой, а наименее важная — последней. Временная синхронизация элементов перехода должна происходит плавно и не допускать возникновения ощущения разрозненности.

Если движение всех элементов происходит одновременно, вы не сможете указать, что действительно важно. Если все элементы равноценны, подумайте об использовании более масштабного движения, чтобы представить их как группу.

Единая хореография

В процессе перемещения по экрану элементы перехода должны вести себя согласованно. Маршруты, по которым движутся элементы, должны быть осмысленны и упорядочены. Необдуманное движение отвлекает.

Хорошо скоординированное приложение предоставляет и возможности для обучения. Если перемещение элементов скоординировано, понимание приложения пользователем увеличивается. Он понимает приложение, он не чувствует себя дезориентированным анимацией.

Не сбивайте пользователей с толку сбивчивым или беспорядочным движением и объектами, которые удаляются/появляются в случайных с виду направлениях.

Передовые методы

• Избегайте прямолинейных пространственных маршрутов, за исключением случаев, когда движение ограничивается одной осью или направлено к конкретной точке/от конкретной точки и согласовано с другими элементами.
• Проследите, чтобы направление, в котором двигаются элементы, было согласованным на протяжении всего перехода. Избегайте сталкивающихся движений и накладывающихся друг на друга маршрутов.
• Помните о глубине: что проходит под чем и почему?
• Если бы все движущиеся элементы оставили на экране след от своего маршрута, насколько красивым и организованным он бы получился? Создаёт ли он четкую картину, куда должно быть обращено внимание?
• Поддерживайте пространственные отношения, согласовывая движение входящих и исходящих элементов.

Анимация может присутствовать во всех компонентах приложения, какого бы размера они ни были. От высокодетализированных иконок до ключевых переходов и действий. Все элементы работают сообща, создавая единое восприятие и прекрасное функциональное приложение.

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

Цвет в материальном дизайне пропитан духом смелых оттенков, стоящих бок о бок с приглушенным окружением, глубокими тенями и яркими светлыми участками. В качестве примеров использовались современная архитектура, дорожные знаки, маркировочная лента тротуаров и спортивные площадки. Используйте неожиданные и полные жизни цвета.

Цветовая палитра

Данная цветовая палитра содержит основные и акцентные цвета, которые могут быть использованы для отоображения или развития цветов вашего бренда. Эти цвета подобраны так, чтобы гармонично дополнять друг друга.

Данная цветовая палитра начинается с основных цветов и заполняет весь спектр, создавая полноценную палитру, пригодную для использования в Android, iOS и в Сети. Google рекомендует в качестве основных цветов вашего приложения использовать оттенки с насыщенностью 500, а остальные — в качестве акцентных цветов.

Использование цветов в UI

Выберите палитру.

Пример основной цветовой палитры

Пример вспомогательной палитры

Используйте непрозрачность для текста, иконок и разделителей

Чтобы ограничить свою цветовую выборку выберите три оттенка из основной палитры и один акцентный цвет из вспомогательной палитры.

Темный текст на светлом фоне

Белый текст на темном фоне

Если темный текст расположен на светлом фоне, непрозрачность основного текста должна составлять 87%. Вспомогательный текст, расположенный ниже в визуальной иерархии, должен иметь непрозрачность 54%. Текстовые подсказки для пользователей, вроде тех, что расположены в текстовых полях и в метках, имеют еще меньшую визуальную важность и непрозрачность 26%.

Темный текст (#000000) Непрозрачность Основной текст 87% Вспомогательный текст 54% Подсказки (текстовые поля, метки) 26%

Светлый текст на темном фоне

Значения в таблице отражают относительную значимость светлого текста на темном фоне.

Светлый текст (#FFFFFF) Непрозрачность Основной текст 100% Вспомогательный текст 70% Подсказки (текстовые поля, метки) 30%

Текст на цветном фоне

Для случаев расположения белого или черного текста на цветном фоне ознакомьтесь с этими таблицами цветовых палитр, в которых указаны оптимальные значения контраста и альфа-канала.

Прочие элементы

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

Панели инструментов и панели состояния

Панели инструментов и более крупные цветные блоки должны использовать основной оттенок (500) главного цвета вашего приложения. Панель состояния должна использовать более темный оттенок (700) вашего основного цвета.

Смелое использование цвета в больших полях поощряется в UI. Различные элементы в UI могут использовать различные части вашей цветовой темы.

Акцентный цвет

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

В плавающей кнопке действия используется акцентный цвет.

Переключатель, использующий акцентный цвет.

Правильно

В основном тексте используйте акцентный цвет только для привлечения внимания к веб-ссылке.

Неправильно

Не используйте акцентный цвет в качестве цвета основного текста.

Правильно

Используйте акцентный цвет для вашей основной кнопки действия и компонентов, таких как переключатели или слайдеры.

Неправильно

Не используйте акцентный цвет для панелей своего приложения или для крупных цветных участков. Избегайте использования одного и того же цвета для плавающей кнопки действия и для фона.

Запасные акцентные цвета

Если выбранный вами акцентный цвет окажется слишком светлым или слишком темным для выбранного фона, то в качестве запасного варианта обычно используется более темный или светлый оттенок акцентного цвета. Если ваш акцентный цвет совершенно не подходит, используйте оттенок 500 вашего основного цвета на белом фоне. Если для цвета фона выбран оттенок 500 вашего основного цвета, используйте 100% белый или 54% черный.

Правильно

Если цветной фон окажется слишком светлым или слишком темным, используйте запасной акцентный цвет.

Неправильно.

Не используйте акцентный цвет на цветном фоне, если контраст недостаточно высок.

Темы

Темы позволяют вам задать приложению единый тон. Тема определяет, насколько темными будут поверхности, задает уровень тени и подходящую непрозрачность для элементов краски. Для продвижения идеи большей гармоничности приложений предложены две темы: Светлая и Темная.

Светлая тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра светлой темы

Применение в UI

Темная тема

1. Панель состояния
2. Панель приложения
3. Фон
4. Карточки/Диалоговые окна

Палитра темной темы

Применение в UI

Иконки приложений

Иконки приложений являются средством визуального выражения приложений, сервисов и инструментальных средств бренда. Простые, выразительные и удобные, они сообщают основную идею и цель приложения. Несмотря на то, что иконка каждого приложения визуально уникальна, все иконки определенного бренда должны быть едины в своей концепции и в исполнении.

Иконки приложений являются основным средством для создания связи с вашим брендом. Используя данное руководство в качестве отправной точки, не забудьте удостовериться, что цвета и прочие ключевые элементы иконки вашего приложения отражают индивидуальность вашего бренда.

Подход к проектированию

Проект иконки приложения создается под впечатлением от тактильных и физических качеств материала. Каждая иконка вырезается, сгибается и укладывается так, будто это бумага, представленная простыми графическими элементами. Материал обладает высоким качеством, его сгибы — ровные, его грани — четкие. Поверхность, напоминающая матовую, взаимодействует со светом с помощью едва различимых светлых пятен и насыщенных теней.

Физический прототип

Изучение света

Материальный прототип

Изучение цвета

Сетка иконки приложения

Сетка иконки приложения была разработана для упрощения достижения согласованности и для определения четкого свода правил позиционирования графических элементов. В результате этой стандартизации была создана гибкая, но согласованная система.

Сетка

Контуры

Формы контуров

Формы контуров лежат в основе сетки. Руководствуясь этими базовыми формами, вы можете сохранять единые визуальные пропорции во всех иконках взаимосвязанных приложений.

Квадрат

Высота: 152dp
Ширина: 152dp

Круг

Диаметр: 176dp

Вертикальный прямоугольник

Высота: 176dp
Ширина: 128dp

Горизонтальный прямоугольник

Высота:128dp
Ширина:176dp

Сетка с единицей измерения DP

На мобильных устройствах иконки запуска приложений имеют размер 48 dp, с толщиной боковой грани 1 dp. При создании иконки используйте систему координат со стороной 48 единиц, но масштабируйте ее до 400%, до размера 192 х 192 dp (толщина грани становится равна 4 dp).

Любое масштабирование оригинального размера будет пропорционально увеличивать или уменьшать изображение. Сохраняя соотношение единиц измерения, вы сможете сохранить резкость граней и правильность линий при уменьшении масштаба.

Сетка 1:1 ед.

Сетка 4:1 ед.

Геометрия

Для некоторых контуров стандарты были определены заранее: круг, квадрат, прямоугольник, перпендикуляры и диагонали. Эта скромная палитра универсальных и простых элементов была разработана с целью унифицирования иконок приложений и систематизации их размещения на сетке.

Анатомия иконки приложения

Анатомия иконки приложения предоставляет описание графических элементов, из которых состоит иконка приложения. Согласованность этих элементов во всех иконках определенного бренда является критическим аспектом создания общего языка визуального общения. Знание этих элементов упростит толкование характеристик каждого логотипа и понимание едва заметных различий между ними. Кроме того, это поможет вам научиться зрительно распознавать внутреннюю структуру логотипов.

1. Внешний слой
2. Задний план материала
3. Передний план материала
4. Цвет
5. Тень

Компоненты

Каждый компонент располагается над предыдущим, точка обзора располагается прямо над иконкой.

Перспектива конструкции

Пример подробной перспективы, иллюстрирующий контекст каждого из компонентов в конструкции логотипа.

Задний план материала

Самый глубоко расположенный элемент материала.

Передний план материала

Элемент материала, приподнятый над задним планом, и отбрасывающий на него тень.

Цветовое пятно

Цвет, использованный на небольшом участке элемента.

Заливка

Цвет, использованный на всём элементе, от края до края.

Светлая грань

Верхняя грань элемента материала. Светлый оттенок — это смесь цвета с белым светом, который осветляет оригинальный цвет.

Затемненная грань

Нижняя грань элемента материала. Темный оттенок — это смесь цвета с более темным тоном, который затемняет оригинальный цвет.

Контактная тень

Мягкая тень вокруг всех граней приподнятого элемента материала.

Внешний слой

Мягкий оттенок, расположенный над всеми элементами, обеспечивающий освещение поверхности, его интенсивность максимальна в левом верхнем углу, а минимальна — в правом нижнем.

Метрики иконки приложения

Освещение

В материальной среде виртуальные источники света освещают сцену и позволяют объектам отбрасывать тени. Верхний свет, направленный на элементы материала, создает контактную тень, освещая при этом верхнюю и нижнюю грани. Свет, направленный под углом, усиливает ощущения наличия поверхности у всех элементов.

Верхний

Угол 45º

Тени

В иконке приложения верхний свет создает мягкую тень, которая едва отбрасывается верхней и левой гранями элемента. В нижней и правой части тень немного насыщеннее. Данная тень всегда содержится внутри силуэта иконки.

Метрики отбрасываемой тени

Режим: Обычный (Normal)
Непрозрачность: 20%
Отступ по оси X: 0px
Отступ по оси Y: 6px
Размытие: 6px
Цвет: См. значения светлого, темного оттенков и тени

Светлая и затемненная грани

Верхняя и нижняя грани элементов материала создают ощущение глубины и нахождения на поверхности. Элементы материала имеют стандартную толщину 1 dp. Все расстояния до края рассчитываются от внутренней грани элемента.
Светлый оттенок подсвечивает верхнюю грань всех элементов. Он не используется на левой, правой и нижней гранях.
Темный оттенок оттеняет нижнюю грань всех элементов. Он не используется на левой, правой и верхней гранях.

Светлая грань

Высота: 1dp
Непрозрачность: 20%
Цвет: Белый (#FFFFFF)

Затемненная грань

Высота: 1dp
Непрозрачность: 20%
Цвет: См. значения светлого, темного оттенков и тени

Внешний слой

Внешний слой возникает в результате освещения виртуальным источником света, расположенным под углом 45º. Он простирается от левого верхнего угла до внешнего края силуэта иконки. Внешний слой всегда располагается в этих границах.

Метрики градиента

Тип: Радиальный (Radial)
Угол: 45º

Цвет: Белый (#FFFFFF)
Местоположение средней точки: 33%

Слайдер 1
Непрозрачность: 10%
Местоположение: 0%

Слайдер 2
Непрозрачность: 0%
Местоположение: 100%

Значения светлого, темного оттенков и тени

Каждый цвет реагирует на добавление светлых и темных оттенков по-разному. Для каждой грани цвет светлого, темного оттенков и тени необходимо корректировать относительно цвета, лежащего под ними. Для достижения цветовой гармонии используйте для каждого цвета соответствующее значение.

Структура иконок приложений

Созданный под влиянием поведения физического материала, ряд простых правил позволяет достичь ощущения тактильности и расположения на поверхности. Взаимодействия материала и цвета позволяют создать множество уникальных композиций.

Цвет

Цветные элементы располагаются на одном уровне с поверхностью бумаги.

Не следует украшать цветные элементы гранями или тенями.

Правильно

Слой

Элементы бумаги, расположенные слоями, создают глубину, благодаря граням и теням.

Не используйте больше двух слоев. Если их будет слишком много, это усложнит иконку и не позволит пользователю сосредоточить внимание.

Правильно

Неправильно

Подъем

Подъем главного элемента материала над незатейливым силуэтом заднего плана заставляет сосредоточить внимание на центре.

Не обрезайте приподнятые элементы материала другой формой.

Правильно

Неправильно

Сгиб

Элементы материала, имеющие сгибы, обладают иллюзией глубины, не теряя при этом своей геометрической формы. Сгибы должны располагаться в центре симметричных форм.

Не используйте несколько сгибов одновременно, и не размещайте сгиб вне центра.

Правильно

Неправильно

Складывание

Элементы материала, сложенные в несколько раз, имеют искаженную форму и большую объемность. Следует избегать цветовых пятен, чтобы не допустить видоизменения или искажения ключевых элементов.

Правильно

Неправильно

Наложение

Накладывающиеся друг на друга элементы материала создают уникальные силуэты. Все элементы, грани и тени располагаются во внутреннем пространстве силуэта.

Не накладывайте друг на друга больше двух элементов. Если их будет слишком много, это усложнит иконку и не позволит пользователю сосредоточить внимание.

Правильно

Неправильно

Гармошка

В точке соприкосновения элементов материала, сложенных гармошкой, проходит соединительный изгиб, используемый для добавления объемности отдельному элементу материала.

Не складывайте элементы гармошкой более двух раз. Если складок будет слишком много, это усложнит иконку и не позволит пользователю сосредоточить внимание.

Правильно

Неправильно

Искривление

Иконки приложений никогда не должны быть искривлены или трансформированы. Элементы должны сохранять свою геометрическую форму, без перекосов, вращений, изгибов и скручиваний.

Неправильно

Неправильно

Иконки с изображениями людей

Представленные ниже рекомендации и примеры демонстрируют передовые методы использования иконок с изображениями людей в вашем UI.

Форма

Построение

Расположение контуров

Формы контуров

Квадрат

Круг

Вертикальный прямоугольник

Горизонтальный прямоугольник

Бумага и цвет

Бумага

Цвет

Жесты

Построение

Композиция

Правила использования иконок с изображениями людей

Правильно

Используйте простые формы для силуэтов заднего плана.

Неправильно

Не используйте сложные формы для силуэтов заднего плана.

Правильно

Всегда используйте корректные и последовательные человеческие формы.

Неправильно

Не используйте некорректные человеческие формы и не добавляйте им сложные детали.

Правильно

Используйте закругленные и прямые грани для визуального баланса.

Неправильно

Не изображайте концы рук округлыми или обрезанными.

Системные иконки

Системная иконка, или иконка UI, символизирует команду, файл, устройство или каталог. Системные иконки также используются для отображения часто используемых действий, таких как удаление в корзину, печать или сохранение.

Дизайн системных иконок прост, современен, понятен и иногда причудлив. Каждая иконка сокращается до своей минимальной формы, и каждая идея предельно концентрируется до голой сути. Их исполнение позволяет гарантировать читабельность и четкость даже при малых размерах.

Принципы дизайна

Формы выразительны и геометричны.

Симметрия и последовательность форм наделяет иконки уникальными качествами, при этом оставляя их простыми и выразительными.

Простая

Понятная

Последовательная

Призывающая к действию

Сетка, пропорции и размер

Сетка с единицей измерения DP

Системные иконки отображаются в размере 24 dp. При создании иконок их разработку следует вести в масштабе 100% для достижения четкости пиксельного изображения, увеличивая масштаб для большей точности.

Масштаб 100%

Масштаб 800%

Сетка иконки

Сетка иконки приложения была разработана для упрощения достижения согласованности и для определения четкого свода правил позиционирования графических элементов. В результате этой стандартизации была создана гибкая, но согласованная система.

Сетка

Контуры

Зона контента

Контент иконки должен располагаться в пределах «живой зоны». Контент должен попадать в зону обрезки только в случае необходимости дополнительного визуального веса. Ни одна из частей иконки не должна находиться за пределами зоны обрезки.

Живая зона

Зона обрезки

Формы контуров

Формы контуров являются основой сетки. Руководствуясь этими основными формами, вы сможете поддерживать единые визуальные пропорции во всех системных иконках.

Квадрат

Высота: 18dp
Ширина: 18dp

Круг

Диаметр: 20dp

Вертикальный прямоугольник

Высота: 20dp
Ширина: 16dp

Высота: 16dp
Ширина: 20dp

Геометрия

Для некоторых контуров стандарты были определены заранее: круг, квадрат, прямоугольник, ортогональные и диагональные контуры. Эта скромная палитра универсальных и простых элементов была разработана с целью унифицирования системных иконок и систематизации их размещения на сетке.

Построение

Композиция

Анатомия системной иконки

1. Конец штриха
2. Угол
3. Контр-участок
4. Штрих
5. Контр-штрих
6. Окаймляющий участок

Углы

Единые радиусы закругления углов — это ключ к унификации всего семейства системных иконок. В форме силуэта иконки использован радиус закругления величиной 2dp. Не закругляйте углы штрихов (форм шириной 2dp и менее).

Внутренние углы должны быть прямоугольными. Не закругляйте углы у внутренних форм.

Внешние углы

Штрихи

Единый вес штрихов — это ключ к унификации всего семейства системных иконок. Используйте штрихи шириной 2px во всех случаях, включая кривые, углы, а также во внутренних и внешних штрихах.

Единообразие

Кривые и углы

Конец штриха

Контр-штрих

Оптические корректировки

Экстремальные сценарии, требующие едва различимых исправлений, делают иконку более разборчивой. Случаи, в которых неизбежно использование сложной детализации, требуют корректировки метрик.

В случае необходимости внесения оптических корректировок, используйте только те согласованные геометрические формы, на которых основаны все остальные иконки. Не растягивайте и не искажайте формы.

Сложная

Мелкий масштаб

Свободное пространство

Для придания иконки разборчивости и доступности для нажатия вокруг нее следует обеспечить достаточное количество свободного пространства.

Участок свободного пространства

Участок свободного пространства

Передовые методы

Согласованность иконок делает их понятнее для пользователя. По возможности используйте в различных приложениях уже имеющиеся системные иконки.

Правильно

Используйте штрихи с одинаковым весом и с прямоугольными концами.

Неправильно

Не используйте штрихи с различным весом или со скругленными концами.

Правильно

Иконки должны быть направлены прямо и выглядеть надежно.

Неправильно

Не наклоняйте и не вращайте иконки, не заставляйте их выглядеть объемными.

Правильно

Упрощайте иконки для большей понятности и удобочитаемости.

Неправильно

Не будьте излишне буквальны и избегайте сложных иконок.

Правильно

Иконки должны быть четкими и выразительными.

Неправильно

Не используйте нежные, тонкие штрихи.

Правильно

Используйте геометрические и согласованные формы.

Неправильно

Не используйте жестикуляционные или нестрогие органические формы.

Правильно

Располагайте иконки «на пикселях», то есть, их координаты по осям X и Y должны быть целыми числами, не содержащими дробной части.

Во избежание искажения иконок они должны иметь одинаковую высоту и ширину (например, 24×24).

Неправильно

Не помещайте иконки в координатах, не являющихся целым числом.

Не искажайте иконку, задав ей различные значения высоты и ширины.

Иконки с изображениями людей

Анатомия иконки с изображением человека

1. Голова
2. Шея
3. Верхняя часть тела
4. Рука
5. Нога

Тело целиком

Верхняя часть тела

Форма

Пример тела целиком

Пример верхней части тела

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

Пример подробного изображения части тела

Тело целиком

Примеры тела целиком

Визуальное выравнивание

Верхняя часть тела

Примеры верхней части тела

Визуальное выравнивание

Размещение внутри другой формы

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

Подробное изображение частей тела

Примеры подробного изображения частей тела

Правила использования иконок с изображениями людей

Правильно

Для рук и ног используйте штрихи одинаковой толщины с прямоугольными концами.

Неправильно

Не используйте штрихи различной толщины и закругленные концы для рук и ног.

Правильно

Выравнивайте элементы для упрощения силуэта.

Неправильно

Не обрезайте части рук или ног.

Правильно

Если элементы расположены внутри другой формы, помещайте их туда полностью.

Неправильно

Не нарушайте границы контейнера элементами.

Правильно

Добавляйте элементы с изображениями людей, если они помогают подробнее передать назначение иконки.

Неправильно

Не добавляйте элементы с изображениями людей, если они усложняют иконку.

Правильно

Используйте самые простые формы для представления человеческих характеристик.

Неправильно

Не используйте человеческие характеристики в неодушевленных объектах.

Цвет

Стандартная непрозрачность активной иконки на светлом фоне — 54% (#000000). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 26% (#000000).

Стандартная непрозрачность активной иконки на темном фоне — 100% (#FFFFFF). Неактивная иконка, стоящая ниже в визуальной иерархии, должна иметь непрозрачность 30% (#FFFFFF).

Изображения — это не просто украшение. Это мощный инструмент, который может помочь вам донести свои идеи и выделить свой продукт. Смелые, яркие и осмысленные изображения помогают привлечь внимание пользователя.

Неважно, хотите ли вы передать подавленное и приглушенное настроение или же яркое и красочное, представленные ниже принципы и передовые методы помогут вам результативно использовать изображения и наполнить жизнь ваши приложения, вне зависимости от используемого визуального бренда.

Содержание

• Принципы
• Передовые методы
• Интеграция в UI

Принципы

Используя иллюстрации и фотографии для улучшения пользовательского восприятия, выбирайте изображения, выражающие личное соответствие, информацию и доставляющие удовольствие.

Личное соответствие

Изображения могут отражать контекст и мир, в котором живет пользователь.

Информация

Изображения могут передавать особую информацию, которая упрощает и ускоряет восприятие.

Удовольствие

Эстетичное изображение контекста сделает ваш продукт уникальным и доставит удовольствие пользователю.

Уделяйте внимание контексту

Убедитесь, что изображения динамичны и связаны с контекстом. Используйте предиктивные визуальные средства для существенного улучшения восприятия пользователя.

Используйте изображения, имеющие отношение к контексту

Создавайте эффект погружения

В случае необходимости можно заслонять или косвенно указывать на определяющие изображения и миниатюры изображений с помощью цвета и перекрытия контентом.

Вводя пользователя в контакт с контентом на переднем плане, можно заслонить изображение на заднем плане

Передовые методы

Используйте различные средства выражения

В одном и том же продукте могут использоваться и иллюстрации, и фотографии. Фотография автоматически подразумевает некоторую степень специфичности и должна быть использована для демонстрации особых объектов и историй. Иллюстрации эффективны для представления идей и метафор в случаях, когда специфичная фотография может показаться чужеродной.

Правильно

Для особых объектов сначала рассмотрите возможность использования фотографий.

Правильно

Когда полная специфичность невозможна или неприменима, иллюстрация передает приближенное значение контента, дополняя восприятие.

Держитесь подальше от фотостоков

Используйте изображения для выражения своих идей и иллюстрации творческого совершенства.

Для особенных объектов или брендированного контента используйте особенные изображения. В случаях использования более абстрактного контента давайте ему пояснения. Фотографии и клипарт из стоков не являются особенными и не объясняют контент.

Правильно

Старайтесь использовать изображения, рассказывающие оригинальные истории.

Неправильно

Стоковые изображения могут казаться наигранными.

Правильно

Для представления конкретных вещей используйте конкретные изображения.

Неправильно

Не стоит при первой возможности использовать лишенные оригинальности стоковые фотографии.

Создайте центр внимания

В своих изображениях используйте графический центра внимания. Внимание может быть обращено как на отдельный объект, так и на доминирующую композицию. Следите за тем, чтобы пользователь с легкостью получал и усваивал идею.

Правильно

Используйте цвет и композицию для создания в изображениях выраженного центра внимания.

Неправильно

Не заставляйте пользователя выискивать смысл в изображении.

Правильно

Самые выразительные изображения содержат несколько значимых элементов и минимум отвлекающих факторов.

Неправильно

Если центр внимания завуалирован, изобразительные качества картинки теряются.

Правильно

Ярко выраженный центр внимания передает идею с первого взгляда.

Неправильно

Отсутствие центра внимания делает изображение бессмысленным.

Создавайте повествования

Создайте затягивающую историю и ощущение образов, чтобы наделить ваше приложение человеческими качествами. Задавайте настроение, рассказывая истории с помощью образов. Настроение заставляет добиваться своих целей? Наводит тоску и тревогу? Создает ощущение праздника?

Правильно

Изображение, рассказывающее историю, несравненно интереснее и информативнее.

Неправильно

Изображение без истории теряет возможность передать настроение, стиль бренда и идею.

Правильно

Идеи с правильным контекстом эффективнее доносят пользователю ваш посыл и стиль бренда.

Неправильно

Представление объекта, не связанное с контекстом, не вызывает интереса.

Интеграция в UI

Разрешение

Проследите, чтобы ваши изображения имели корректные размеры на различных дисплеях и платформах. Материальный дизайн делает акцент на больших изображениях. В идеале, на ваших изображениях не должны быть заметны пиксели. Проведите тесты на экранах устройств с различными размерами и соотношениями сторон.

Правильно

Используйте изображения соответствующего размера.

Неправильно

Изображения низкого качества.

Используйте градацию

Используйте альтернативную градацию для создания уровней различной визуальной ценности.

В галерее используйте миниатюры различных размеров для передачи иерархии контента

Поддерживайте использование нескольких контейнеров в одной экосистеме.

Защита текста

Чтобы сделать текст на изображении читабельным, добавьте ему вспомогательный фон.

Правильно

Темный фон в идеале должен иметь непрозрачность на уровне 20%-40%, в зависимости от контента. Светлый фон в идеале должен иметь непрозрачность на уровне 40%-60%, в зависимости от контента.

Неправильно

Используя фон, не затемняйте изображение.

Правильно

Для крупных участков ограничивайте зоны использования фона, чтобы не закрыть изображение полностью.

Неправильно

Не используйте слишком много фона на больших изображениях.

Правильно

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

Правильно

Вы можете использовать цветовую палитру своего бренда в декоративных целях, чтобы улучшить восприятие изображений.

Аватары и миниатюры

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

Аватары могут использоваться для представления людей. Предоставляйте пользователям возможности для индивидуализации собственных аватаров. Если пользователь не захочет персонализировать собственный аватар, предоставьте ему аватар, устанавливаемый по умолчанию, который бы привел его в восторг. Аватары могут использоваться для представления бренда, если в них используется определенный логотип.

Миниатюры намекают на получение дополнительной информации, позволяя пользователю украдкой взглянуть на контент, и помогают в навигации. Миниатюры позволяют вам использовать изображения в ограниченных пространствах.

Благодаря аватарам приложение кажется более личным — и они занимают минимальное количество места.

Брендированный аватар сообщает информацию с первого взгляда.

Определяющие изображения

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

Особое изображение

Особое изображение — это выразительный первичный центр внимания в неоднородном макете.

Встроенное определяющее изображение

Определяющие изображения создают обстановку для неоднородных фрагментов контента в макете. Они не являются первичным центром внимания.

Галереи

Изображения в галереях — это яркие визуальные определяющие изображения в однородном макете, расположенные в виде сетки или как отдельные изображения.

Сетка фотографий

Изображение в галерее

После релиза Android Ice Cream Sandwich, стандартным шрифтом, используемым в Android, стал Roboto. После релиза Froyo штрифт Noto стал стандартным шрифтом, используемым в Android для всех языков, не поддерживаемых шрифтом Roboto. Кроме того, Noto — это стандартный шрифт для всех языков в Chrome OS.

Классификация языков

Системы письма можно разделить на 3 категории:

Английская и подобные ей: Латиница (кроме вьетнамского), греческий и кириллица, которые поддерживаются и Roboto, и Noto. Roboto был расширен и теперь полностью охватывает все символы латинского, греческого и кириллического шрифтов, определенных в стандарте Unicode 7. 0. Количество поддерживаемых символов удвоилось, по сравнению с предыдущими релизами, с приблизительно 2000 до примерно 4000 символов.

Высокие: Системы письма, требующие увеличения высоты строки, чтобы уместить более крупные знаки, они включают в себя Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди, телугу, тайский и вьетнамский. Noto поддерживает два значения насыщенности шрифтов этих языков.

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

См. полный список в таблице категорий языков.

Гарнитура шрифта

Roboto

Шрифт Roboto был значительно доработан, чтобы быть пригодным к использованию на еще большем количестве платформ. Он стал немного шире и округлее, что придало ему большую четкость и более оптимистичный внешний вид.

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

Буквы A-Z и цифры шрифта Roboto

Насыщенность шрифта Roboto

Шрифт Roboto имеет шесть значений насыщенности: Тонкий (Thin), Ненасыщенный (Light), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black).

Насыщенность шрифта Roboto

Noto

Вертикальные метрики Noto совместимы с Roboto.

Примеры использования Noto Sans с английским алфавитом и CJK-алфавитами (китайский, японский и корейский)

Примеры использования Noto Sans с тайским и хинди (деванагари)

Насыщенность шрифта Noto

CJK-алфавиты (китайский, японский и корейский) Noto Sans имеют семь значений насыщенности: Тонкий (Thin), Светлый (Light), Полусветлый (DemiLight), Обычный (Regular), Средний (Medium), Насыщенный (Bold) и Черный (Black). Насыщенность Noto Sans CJK Regular и Roboto Regular одинакова.

Насыщенность шрифтов CJK-алфавитов Noto Sans

Шрифты Noto для тайского, деванагари и всех других широко используемых живых языков имеют насыщенность Обычный (Regular) и Насыщенный (Bold).

Насыщенность шрифтов тайского и хинди (деванагари) алфавитов Noto Sans

Шрифты с хинтовкой

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

И Roboto, и Noto имеют версии с хинтовкой и без нее. Google рекомендует:

• Используйте версии без хинтовки в Android и Mac OS X, поскольку хинтовка в них не используется.
• Используйте шрифты с хинтовкой в Chrome OS, Windows и Linux.

Стек шрифтов

В свойствах элементов, используемых в Android и в вебе, стек шрифтов должен включать в себя Roboto, Noto, и затем sans-serif.

Стили

Одновременное использование слишком большого количества размеров и стилей шрифтов может поломать любую верстку. Типографическая шкала содержит ограниченный набор размеров шрифтов, которые хорошо сочетаются с сеткой любого макета.

Эти размеры и стили были разработаны, чтобы сбалансировать плотность размещения контента и удобство чтения в среднестатистических условиях использования. Размеры шрифтов указаны в единицах измерения sp (масштабируемые пиксели), позволяя использовать режимы с крупными шрифтами для упрощения восприятия.

Английская и подобные ей системы письма

Латиница, греческий и кириллица.

Базовый набор стилей основан на типографической шкале 12, 14, 16, 20 и 34.

Примеры использования стиля Акцидентный (Display), английский язык

Примеры использования стиля Заголовок (Headline), английский язык

При использовании в форм-факторах текст, используемый на панели приложения, должен использовать стиль Титульнй (Title), Medium 20sp.

Примеры использования стиля Титульный (Title), английский язык

В особых сценариях используйте более крупный стиль Subhead, вместе меньшего стиля Основной (Body). Некоторые из этих сценариев включают в себя случаи, когда информация представляется небольшими фрагментами, либо когда заголовки стоят рядом с текстом, использующим стиль Основной (Body).

Примеры использования стиля Подзаголовок (Subhead), английский язык

Примеры использования стиля Основной (Body), английский язык

Примеры использования стиля Основной (Body), английский язык

Стиль Кнопка (Button) (Medium 14sp, все буквы заглавные) используется во всех кнопках. В тех языках, где используются заглавные буквы, текст кнопок должен быть написан заглавными. В языках, не использующих заглавные буквы, рассмотрите возможность использования цветного текста на плоских кнопках, чтобы отделить их от обычного текста.

Примеры использования стиля Кнопка (Button), английский язык

Плотные системы письма

Китайский, японский и корейский.

Насыщенность: Поскольку Noto CJK имеет семь значений насыщенности, соответствующих Roboto, используйте те же параметры насыщенности, что и в английском языке.

Размер шрифта: В стилях от Титульного (Title) до Подписи (Caption) размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Титульного (Title) можно использовать размер шрифта, используемый для английского языка.

Стили плотных систем письма

Пример, плотная система письма

Пример стиля Подзаголовок (Subhead), японский

Пример стиля Основной (Body), японский

Пример стиля Основной (Body 1), японский

Пример стиля Подзаголовок (Subhead), традиционный китайский

Пример стиля Основной (Body), традиционный китайский

Пример стиля Основной1 (Body1), традиционный китайский

Высокие системы письма

Языки Южной и Юго-восточной Азии, а также Среднего Востока, такие как арабский, хинди и тайский.

Насыщенность: Используйте значение насыщенности Regular, поскольку значение Medium в Noto отсутствует. Google рекомендует избегать использования насыщенности Bold, поскольку по отзывам носителей языка шрифт выглядит слишком тяжелым.

Размер шрифта: В стилях от Title до Caption размер шрифта на 1px больше, чем указанный для английского языка. В стилях крупнее Title можно использовать размер шрифта, указанный для английского языка.

Стили высоких систем письма

Пример, высокая система письма

Пример стиля Подзаголовок (Subhead), хинди

Пример стиля Основной (Body), хинди

Пример стиля Основной1 (Body1), хинди

Пример стиля Подзаголовок (Subhead), тайский

Пример стиля Основной (Body), тайский

Пример стиля Основной1 (Body1), тайский

Высота строки

Для достижения надлежащей читабельности и нужного тема высота строк была рассчитана исходя из индивидуального размера и насыщенности каждого из стилей. Перенос строк используется только в стилях Основной (Body), Подзаголовок (Subhead), Заголовок (Headline), и в более мелком Акцидентном (Display). Все остальные стили должны существовать только в виде одиночных строк.

Английская и подобные ей системы письма

Типографика и высота строки в английском и подобная английскому

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

Примеры отдельного использования — Высота строки увеличена

Плотные и высокие системы письма

У всех стилей высота строки будет на 0.1em больше, чем у подобных английских языков. Английский и подобный английскому языки в основном используют лишь часть печатной строки, чаще всего — ее нижнюю часть, расположенную ниже уровня высоты символов нижнего регистра. Китайские, японские и корейские (CJK) идеографические символы используют всю высоту печатной строки. Символы в высоких шрифтах часто имеют длинные нижние и/или верхние выносные элементы. Для того, чтобы в шрифтах CJK донести те же дизайнерские идеи, что и в английском, и чтобы избежать потенциального обрезания текста двумя расположенными по соседству строками в высоких шрифтах, в высоких и в плотных системах письма высота строки должна быть больше, чем в английском.

Высота строки в высоких и плотных системах письма

Пример использования различной высоты строк в паре, тайский и хинди

Пример использования различной высоты строк в паре, китайский и японский

Прочие типографические нормы

Цвета и контраст

Текст, цвет которого будет очень напоминать цвет фона, будет трудночитаемым. Текст с очень высоким контрастом тоже может быть трудночитаемым. Это особенно заметно в случаях, когда светлый текст расположен на темном фоне.

Для сохранения читабельности текст должен сохранять соотношение контраста не ниже 4.5:1 (рассчитывается исходя из уровня яркости). Предпочтительным является соотношение 7:1.

Данные цветовые комбинации также включают в себя соотношения контраста, подходящие для пользователей с нарушенным цветовосприятием.

Контраст при размещении на светлом фоне

Контраст при размещении на темном фоне

Контраст при размещении над изображением

Контраст при размещении над иллюстрацией

Крупный и динамический шрифт

Для достижения наилучшего пользовательского восприятия используйте динамический шрифт, а не одни лишь шрифты малого размера или обрезку крупноразмерного текста.

При правильном применении крупные шрифты могут делать приложения интереснее, видоизменять макеты и помогать пользователям быстрее усваивать контент.

Динамический шрифт позволяет использовать крупный шрифт, когда длина текста в макете неизвестна. Динамические размеры выбираются из типографической шкалы на основании доступного места и приблизительного значения величины букв.

Динамический шрифт

Применение в UI

Перенос строк

На изображениях показаны передовые методы переноса строк.

 

Правильно

 

Неправильно

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

Разрядка и кернинг

Длина строки

Примите во внимание следующий совет по достижению лучшей читабельности и длины строк от Baymard Institute:

«Если вы хотите оставить от чтения хорошие впечатления, используйте в строке около 60 символов. На каждой строке должно находиться правильное количество символов — это ключ к достижению читабельность вашего текста.»

«Слишком длинная — если строка текста слишком длинная, взгляду пользователя будет трудно сфокусироваться на тексте. Это связано с тем, что большая длина затрудняет понимание того, где строка начинается, и где заканчивается. Кроме того, в крупных блоках текста может быть трудно найти следующую строку для продолжения чтения.»

«Слишком короткая — если строка слишком короткая, взгляду придется слишком часто возвращаться обратно, что сбивает читатетя с ритма. Слишком короткие строки тоже раздражают людей, заставляя их взгляд перескакивать на следующую строку, не успев закончить текущую (тем самым пропуская потенциально важные слова).»

В основе материального дизайна лежат элементы печатного дизайна — типографика, сетки, пространство, масштаб, цвет и изображения, создающие иерархию, особый смысл и центры внимания, погружающие пользователя в эту реальность. Материальный дизайн использует приемы из области печатного дизайна, такие как базовая сетка и структурные шаблоны. Эти приемы повторно используются на множестве страниц. Эти макеты масштабируются до размеров любого экрана, что упрощает процесс создания масштабируемых приложений.

Эти макеты способствуют единообразию, используя повторяющиеся визуальные элементы, структурные сетки и свободное пространство на всех возможных платформах и размерах экрана. Это единообразие создает узнаваемый пользователями образ на различных устройствах.

Как работает бумага

В материальном дизайне физические свойства бумаги передаются на экран. Задний план приложения напоминает плоскую, непрозрачную текстуру листа бумаги.

Поведение приложения повторяет способность бумаги изменять свой размер, перетасовываться и собирать вместе несколько листов. Элементы, живущие вне приложений, такие как системные панели или панели статуса, ведут себя иначе. Они расположены отдельно от контента под ними, они не обладают физическими свойствами бумаги.

Стыки

Два листа бумаги, имеющие общее ребро, называются состыкованными. Будучи объединенными стыком, они перемещаются вместе.

Стыки двух листов материала

Ступени

Два листа бумаги, накладывающиеся друг на друга, с различными значениями положения на оси Z (или глубиной), образуют ступени. Они движутся независимо друг от друга.

Ступени при наложении двух листов материала

Плавающая кнопка действия

Плавающая кнопка действия — это круглый лист, расположенный отдельно от панели инструментов. Она представляет собой отдельное продвигаемое действие.

Она может нависать над ступенью, если контент, к которому она относится, уже сам создает ступень.

Плавающая кнопка действия, нависающая над ступенью

Плавающая кнопка может нависать над стыком, если она относится к контенту обоих листов.

Не создавайте декоративных стыков с целью определения точки крепления для действия.

Плавающая кнопка действия, нависающая над стыком

Некоторые единицы измерения в различном контексте имеют различные значения. В этой главе описано использование устройство-независимых пикселей, масштабируемых пикселей, а также таких идей как плотность пикселей.

Плотность пикселей

Количество пикселей, помещающихся в одном дюйме, называют «плотностью пикселей». Экраны с высокой плотностью имеют больше пикселей на дюйм, чем экраны с низкой плотностью. В результате элементы UI (например, кнопка) выглядят крупнее на устройствах с экранами с низкой плотностью и меньше на экранах с высокой плотностью.

Dpi, или разрешение экрана, обозначает количество пикселей конкретного дисплея.

dpi = ширина (или высота) экрана в пикселях / ширина (или высота) экрана в дюймах

Экран с высокой плотностью

Экран с низкой плотностью

Не зависящие от плотности пиксели (dp)

«Независимость от плотности» означает одинаковое отображение элементов UI на экранах с различной плотностью.

Не зависящие от плотности пиксели — это гибкие единицы измерения, которые на любом экране масштабируются до одного и того же размера. Разрабатывая приложения под Android, используйте dp для одинакового отображения элементов на экранах с различной плотностью.

Ширина экрана в пикселях
(dpi * ширина в дюймах) Ширина экрана
в не зависящих от плотности пикселях 120 dpi 180 px 240 dp 160 dpi 240 px 240 dpi 360 px

Если у вас 3 экрана, каждый шириной 1,5 дюйма, но при этом все они имеют различные разрешения, ширина каждого экрана все равно составит 240dp.

dp равен одному физическому пикселю на 160 dpi экране. Для расчета dp:

dp = (ширина в пикселях * 160) / dpi

В процессе написания CSS используйте px в местах, где указано dp или sp. Dp следует использовать только при разработке под Android.

Масштабируемые пиксели (sp)

При разработке под Android масштабируемые пиксели (sp) служат той же цели, что и dp, но используются в шрифтах. По умолчанию значение sp совпадает с используемым по умолчанию значением dp.

Основное отличие между sp и dp заключается в том, что sp сохраняет настройки шрифта пользователя. Пользователи, настроившие более крупный размер шрифта для улучшения читабельности, увидят шрифт такого размера, который будет совпадать с их предпочтениями.

Проектирование макетов с использованием dp

При проектировании макетов под экран рассчитывайте размеры элемента в dp:

dp = (ширина в пикселях * 160) / dpi

Например, иконка размеров 32 x 32 px при 320 dpi будет иметь размеры 16 x 16 dp.

Масштабирование изображений

Используя следующие соотношения сторон, можно масштабировать изображения, чтобы они выглядели одинаково на экранах с различным разрешением:

Разрешение dpi Пиксельный коэффициент Размер изображения (в пикселях) xxxhdpi 640 4.0 400 x 400 xxhdpi 480 3.0 300 x 300 xhdpi 320 2.0 200 x 200 hdpi 240 1.5 150 x 150 mdpi 160 1.0 100 x 100

Источник: http://css-live.ru/articles/materialnyj-dizajn-vvedenie.html

ВоркДримс » Material Design (Материал дизайн). Подробное описание концепции

Разнообразие применений Material Design

Material Design представляет собой концепцию дизайна, созданную для унификации сервисов, интерфейсов и прочих продуктов. Концепция была разработана компанией Google и представлена ею для широкой аудитории 25.06.2014 года на конвенции Google I/O. В основе разработки цветовая схема, свойства и элементы объектов дизайна. Material Design регулярно дополняется и обновляется разработчиками. Говоря простым языком, основная идея заключается в дизайне в виде блоков, которые открываются и сворачиваются кубиками, подобно картам, с использованием эффекта тени. Сами карты должны плавным образом переключаться между собой.

Содержание:

1. Основные принципы
2. Тактильные поверхности
3. Полиграфический дизайн
4. Геометрическая иконографика
5. Цвет
6. Анимация
7. Адаптивность
8. Примеры
9. Видеоролики

В основе стратегии такого дизайна лежит в создании целостного пользовательского опыта, возможности проникновения сервисов в самые разные сферы жизнедеятельности пользователя ПК.

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

— Джон Вайли, главный по дизайну поиска Google

Главные принципы

К главным принципам Material Design нужно отнести тактильные поверхности, полиграфический дизайн, осмысленная анимация, адаптивный дизайн.

Тактильные поверхности. Интерфейс состоит из «цифровой бумаги». Слои этой «бумаги» размещаются один над другим, и отбрасывают тени. Благодаря этим теням, пользователи персональных компьютеров лучше понимают основы работы с интерфейсом.

Полиграфический дизайн. На «цифровой бумаге» отображаются «цифровые чернила». Для изображений — «цифровых чернил» применяется подход традиционного журнального или плакатного дизайна. Основными элементами печати дизайна являются типографика, масштаб, сетка, цвет и пространство. Из них создается фокус, иерархия и значение. Благодаря цвету, шрифтам, размерам, фону и прочим элементам создается сам дизайн интерфейса. Пользование им акцентирует внимание на главных функциональных возможностях, ключевых точках управления продуктом или сервисом.

Осмысленная анимация. От четкости и понятности анимации приложения напрямую зависят затраты времени пользователя персонального компьютера на осознание результатов действий, применяемых в данной программе. Анимация — это своеобразная подсказка по управлению интерфейсом Материального дизайна.

Адаптивный дизайн. Одной из особенностей Материального дизайна является его универсальность, то есть возможность применения трех выше описанных составляющих на разных устройствах, таких как компьютер, телефон, планшет и т.д.

Тактильные поверхности

Тактильные поверхности с разными уровнями

Тактильные поверхности — это те самые кусочки «цифровой бумаги», которые в отличие от обычной бумаги обладают сверхспособностями — умеют растягиваться, соединяться и менять свою форму.

Поверхность

Поверхностью называют часть элемента дизайна, отбрасывающую тень, благодаря которой один элемент отличается от другого. Материальный дизайн стремится к максимальной простоте и «чистому» дизайну.

«Чистым» дизайном принято называть возможность передачи свойств объекта посредством градиента или тени, без применения структуры. Все поверхности имеют собственную тень и определенную высоту.

Глубина

В «плоском дизайне» стараются не использовать тени, которые демонстрируют объем. Одновременно с этим тени задают определенную иерархию и структуру элементов интерфейса. Глубокая тень выделяет ключевой объект и акцентирует на нем внимание тонким и изящным образом.

Блоки с разной иерархией

Глубина является подсказкой о взаимодействии объектов. В момент пользовательского скролла зеленая плашка прикрепляется к верхнему слою и образует тень. Это наглядно демонстрирует не только движение «чернил», но и перемещение белого фона, расположенного ниже.

Нижний слой глубины является «дном».

• Помните о логистике. Различные диалоговые окна, плавающие окна, тулбары имеют определенную высоту. Во избежание столкновений периодически им необходимо двигаться по оси Z.
• Не насилуйте кнопки. Применять плавающую кнопку нужно только в случае острой необходимости, так как ее использование сразу же привносит в дизайн эффект Material Design. Для подтверждения каких-либо действий и закрытия окон использовать ее не стоит.
• На карточке должно быть не все. Использовать карточку уместно только в случае, когда объект содержит в себе множество форм и большой объем контента. При других вариантах целесообразнее использовать традиционный текст или списки.
• Минимализм в диалоговых окнах. Использовать диалоговые окна следует исключительно для подтверждения действий пользователя при возникновении вопросов.

Все объекты, расположенные на поверхности материального дизайна, наносятся «цифровыми чернилами». Этими объектами являются изображения, тест, пиктограммы. Расположение этих объектов происходит по принципу полиграфического дизайна.

Изящная типографика

Типографика имеет важное значение в полиграфическом дизайне. Она задает структуру контента и влияет на образование стиля определенного бренда.

Типографика образует структуру элементов, которые имеют свой размер, шрифт, иерархию С их помощью мы визуально понимаем, какие элементы более значимы и почему одни из них являются ключевыми, а другие — второстепенными.

Контрастная типографика

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

Модульная сетка и направляющие

Модульная сетка

Если в экранном дизайне применяются базовые сетки, то в полиграфическом дизайне — модульные сетки. Для Material Design используют сетку с шагом 8dp.

Отличительной чертой размещения контента в Материальном дизайне считается размещение основных направляющих. Благодаря им, создаются отступы от границ экрана, влияющие на структуру содержания страницы и управление взглядом пользователя. В результате, в центре экрана мы видим основной текст, а дополнительные элементы размещены за его пределами, у границ.

Геометрическая иконографика

Геометричность иконки приложения «Камера»

Простейшие иконки давно использовались на базе работы системы Андроид. В Material Design они выглядят еще проще и визуально приятнее.

Примеры геометричных иконок

Для примера, индикаторы и кнопки выделяют насыщенными яркими цветами. Благодаря таким цветам, расставляют акценты на основных элементах управления (плавающих кнопках и т.д.). При необходимости внесения дополнительных цветов в дизайн рекомендуется использовать базовые, неброские оттенки.

Скачать иконки по теме:

• Иконки для приложений (Material Design)
• 306 простых иконок
• Подборка неоновых контурных иконок

Цвет

Цвет в дизайне отвечает за выразительность. Ранее в Андроид цветовая гамма была второстепенной, теперь же ей отводится одна из ключевых ролей. В Материальном дизайне базовая палитра цвета состоит из акцентных и основных оттенков.

Основным цветом окрашивают action bar, а status bar выделяют более насыщенным его тоном. Акцентный цвет применяется для полосок, индикаторов, плавающих кнопок. Он привлекает внимание к ключевым элементам правления.

Акценты расставляются точечно и в небольшом количестве. Для остальной части интерфейса цвета применяют в соответствии с правилом: большой объем текста (список писем почты) оставляют стандартного размера и добавляют цвет для обращения внимания пользователя ПК; малый объем текста (калькулятор, фото) увеличивают в 2-3 раза в размере и добавляют цветные плашки.

В системе Андроид можно раскрашивать интерфейс динамически, то есть выделять основные цвета из общей фотографии.

Пример работы библиотеки «Palette»

Красивые фото

В Material Design можно и даже нужно использовать различные фотографии и иллюстрации. Часто в картинках отсутствуют рамки. Сам status bar делается бесцветным, чтобы не отвлекать внимание от изображений. «Цифровые чернила» всегда используют не только для красоты, но обязательно для функциональности дизайна.

• Рекомендуется брендирование.
• Нельзя забывать об отступах и свободном пространстве (для базовой сетки 8dp, для отступов — 72 dp).
•  Используйте яркие изображения.

Осмысленная анимация

В Материальном дизайне, как и в обычном мире, используется осмысленная анимация, чтобы продемонстрировать пользователю то, что произошло в данный момент. То есть, пользователь должен видеть, что ни один объект не берется из ниоткуда и не исчезает в никуда.

Пример анимации вкладок

Пример 1. Анимация показывает, что именно эта конкретная карточка после нажатия вышла на передний план, раскрылась, и стало видно больше информации.

Пример 2. При нажатии на дату в календаре всплывает событие, которое плавно отрывается слоем от общего календаря, превращается в отдельный блок и раскрывается в подробном отдельном блоке с описанием этого события.

Анимация помогает сконцентрировать внимание пользователя, сосредоточить его взгляд на действиях интерфейса.

Реакция

Еще одним ключевым моментом анимации в Материальном дизайне считается реакция на определенные действия пользователя ПК. Изменения в интерфейсе Андроид L происходят после касаний пальцев. Эти изменения отображаются волнообразным действием.

Микроанимации

Микроанимации крайне важны. Их используют в качестве ответных действий на все манипуляции пользователя. Это придает интерфейсу детальности и отзывчивости.

Четкость и резкость

Заключительным принципом анимации является четкость и резкость действий. В Material Design интересная кривая анимации. Все объекты быстро реагируют на действия пользователя, резко возвращаются обратно, но занимают несколько больше времени для замирания и перехода в финальное спокойное состояние. В конечном итоге, пользователь не тратит времени на ожидание, а значит, не раздражается и не получает негативных эмоций при взаимодействии с интерфейсом.

• Продумывайте анимацию заранее.
• Используйте анимацию оптимально (чрезмерное злоупотребление не поощряется, так как вся анимация должна быть обязательно осмысленной).

Адаптивный дизайн

Заключительным ключевым аспектом Материального дизайна является концепция адаптивного дизайна. Это означает варианты применения других трех аспектов на различных экранах устройств (телефон, ПК, телевизор и т.д.).

От общего к частному

Самый популярный метод — сжатие объема информации вместе со сжатием самого экрана. На телевизоре можно разместить много контента. На телефоне сначала размещается список, при нажатии на который можно раскрыть детальную информацию.

Отступы

На больших экранах контент размещается с помощью блоков. Они заполняют собой свободное пространство и могут растягиваться по ширине. Растяжение происходит с учетом удобочитаемости содержимого. На оставшейся части экрана создаются отступы, на которых можно расположить плавающие кнопки или плашки.

Направляющие

Отступы задаются благодаря направляющим. Ширина отступов для смартфонов, планшетов, компьютеров и телевизоров будет абсолютно разной. Так, для планшета она составляет 80 dp, а для экрана смартфона — всего 72 dp.

Размеры

Все элементы интерфейса должны иметь кратные пропорции. Размеры экранов планшетов и смартфонов отличаются друг от друга, но приложения с использованием элементов с кратными параметрами адаптируются к любым размерам устройств.

Блоки

Модульная сетка, состоящая из блоков, помогает задать визуальный ритм для оптимального принятия решения.

Тулбар (Toolbar)

Action bar — один из главных составляющих интерфейса. В нем размещают кнопки действий и заголовки. В Андроид L экшен бар стал привлекательным и функциональным блоком управления. Этого удалось достичь благодаря тому, что в Тулбар можно поместить формы, плавающие кнопки, выдвижную навигацию с удобным управлением.

• Не стоит использовать navigation drawer для простых инструментов. Применять навигацию рекомендуется только для многочисленных задач в приложении.
• Будьте смелее с тулбарами.
• Размещайте плавающую кнопку в наиболее оптимальном месте. Не делайте привязку строго к нижнему углу.
• Отрабатывайте элементы интерфейса как под вертикальный, так и под горизонтальный экран устройства.

Material как метафора

Разработчикам компании Google удалось соединить хороший привлекательный дизайн с инновациями современных технологий и науки.

Материализм в цифровой сфере используют не впервые. Так, Apple недавно использовала в дизайне интерфейсов философию скевоморфизма (имитации восприятия визуальных объектов из окружающего нас материального мира).

Скриншот приложения «Newsstand» из iOS 6

Хорошим его примером является приложение «Newsstand». Здесь визуализировались привычные нам объекты: газеты, журналы, которые стоят на полках. Перелистывая эти журналы мы имитируем реальное перелистывание обычной книги из повседневной жизни. Таким образом, в «цифру» продублирована традиционная реальная жизнь.

Развитие цифрового дизайна

Подавляющее большинство пользователей ежедневно взаимодействует с цифровой средой. Они уже не требуют точного сходства виртуальных объектов с реальным миром. Чем скорее к этому моменту привыкнут все пользователи, тем скорее digital design  сможет начать активно шагать вперед.

Опираясь на это, Материальный дизайн уже не так сильно подвергается влиянию скевоморфизма. Теперь это лишь новая ступень в эволюции виртуальных объектов.

Наглядность как фундаментальная основа

Поверхности и грани различных элементов управления в Материальном дизайне создают подсказки в ориентировании, управлении интерфейсом, подобно действиям в реальной жизни.

Тактильные характеристики объектов помогают отличать ключевые объекты от дополнительных, определять взаимосвязь между ними.

Основы Material design также включают в себя принципы печатного дизайна. Акценты расставляются не только для эстетики, но и для создания особой структуры, иерархии, создания простой системы управления.

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

Осмысленная динамика

Главное внимание фокусируется на поведении (действиях) пользователя. Его взаимодействие с дизайном происходит на базе накопленного пользовательского опыта, и никак не иначе.

---

Примеры Material Design

Скачать исходники  Android-приложений:

• Подборка шаблонов Android-приложений — Lollipop Kit
• Шаблон социального Android-приложения в стиле Material Design
• Шаблон Android-приложения «Sepia UI Kit»
• Шаблон социального Android-приложения (профиль, лента, уведомления)
• Шаблон Android-приложения «Tricolor TV»

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

Приложение «Gmail Inbox»

 

Анимация приложения на Android Wear

 

Приложение «Newspaper»

Приложение «Events List»

Приложение «Flight Animation»

Создание единой концепции дизайна интерфейса и интеграции различных сервисов поможет получить абсолютно новый пользовательский опыт, который будет предельно простым и интуитивно понятным. Алгоритм управления будет схож с управлением в материальном мире. Грань между реальностью и виртуальностью будет стерта.

Примеры сайтов в стиле Material Design

Как только в интернете появился релиз концепции, в сети появилось множество представителей Материального дизайна.

Сайты, взятые для примеров, созданы в точном соответствии с основными принципами Материального дизайна. Они просты и понятны, содержат в себе плавающие кнопки, тени, яркие цвета и визуальные эффекты, плавную навигацию. Все это в совокупности помогает получить прекрасный пользовательский опыт.

Видеоролики

Material Design заинтересовал собой огромную аудиторию. Он демонстрирует как правильно создавать UI, чтобы он был абсолютно понятен и ясен пользователю ровно также, как и привычный объект из реального мира, который можно потрогать руками.

Roman Nurik, один из дизайнеров команды Google, рассказал, как изменилось приложение I/O 2014 в процессе разработки, чтобы соответствовать принципам Material Design. Специально для вас мы перевели его видео.

Видео от канала «Google Design».

введение в анимацию и взаимодействие

Material Design (материальный дизайн) — это большая дизайн-библиотека, с помощью которой дизайнеры и разработчики могут создавать мобильные приложения, веб-сайты, веб-приложения и другие цифровые продукты. Ее подробная документация содержит много информации и будет полезна даже самым опытным дизайнерам.

Material Design UI от Google — одна из самых популярных дизайн-библиотек в мире. Если вы пользуетесь продуктами Google (Gmail, Meet, Docs и т.д.) или устройством Android, вы, скорее всего, ежедневно взаимодействуете с Material Design UI.

Это нечто большее, чем обычная библиотека. Это настоящий мастер-класс по проектированию опыта взаимодействия с отличной документацией, принципами/лучшими практиками и учебными пособиями.

Что такое Material Design?

Material Design — это дизайн-библиотека, разработанная компанией Google. Она включает UI-компоненты, иконки, типографику, а также рекомендации и учебные материалы, которые помогают дизайнерам и разработчикам использовать ее максимально эффективно.

Google представил Material Design в 2014 году на конференции Google I/O. Цель компании состояла в том, чтобы создать “осязаемую” библиотеку на основе цифровых чернил и бумаги. “В отличие от настоящей бумаги, наш цифровой материал может расширяться и менять форму. У материала есть физические поверхности и края. Благодаря швам и теням компоненты выглядят так, будто их можно потрогать”. Матиас Дуарте — вице-президент Google по дизайну.

Material Design отличается от других библиотек тем, что центральным элементом здесь является взаимодействие. Именно поэтому Material Design выбирают все больше дизайнеров.

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

Одно из самых больших преимуществ Material Design заключается в следующем: вы фактически используете библиотеку, каждый элемент и компонент которой был протестирован UX-дизайнерами Google, что экономит вам сотни часов тестирования и итераций. 

Кроме того, Material знаком миллиардам людей, поэтому большинство из них могут сразу же начать использовать ваш продукт, не изучая новую дизайн-систему, что можно назвать огромным преимуществом с точки зрения психологии дизайна, ведь это приводит к снижению когнитивной нагрузки.

Еще одно важное преимущество разработки с использованием Material Design — скорость. Дизайнеры могут перетаскивать элементы и компоненты Material и создавать из них интерфейсы, что позволяет сэкономить время и не начинать каждый раз все с нуля.

Наконец, Material Design имеет открытый исходный код, то есть вы можете настроить библиотеку таким образом, чтобы она соответствовала вашему бренду или продукту. Дизайн-система доступна для Android и iOS, что позволяет использовать одну библиотеку для обеих операционных систем.

Особенности Material Design

Material Design — многофункциональный инструмент, с помощью которого можно создать практически любой продукт. Мы рассмотрим некоторые ключевые элементы библиотеки — именно их чаще всего используют дизайнеры при проектировании интерфейсов.

Компоненты

Material Design имеет огромную библиотеку компонентов и UI-паттернов (всего 17 категорий), включая кнопки, панели навигации, меню, элементы выбора даты, карточки, списки изображений и многое другое!

Google продумал все возможные компоненты, которые могут понадобиться дизайнеру, а вы можете настроить их в соответствии с вашими потребностями. Например, в разделе “Нижняя панель навигации” (Bottom Navigation) вы узнаете о принципах использования, анатомии, поведении, правилах размещения, состояниях и особенностях стилизации компонента, что поможет реализовать его наиболее эффективно.

Кроме того, Google предлагает разработчикам базовый HTML и CSS-код для внедрения каждого компонента: инженеры могут скопировать/вставить его в свои файлы, чтобы не начинать работу с нуля.

Эти компоненты Material были разработаны специально для веб-сайтов и веб-приложений. Разработчики также могут найти библиотеки Material для React, Vue, Angular и других. Однако важно отметить, что команда Material Design не занимается поддержкой этих неофициальных библиотек.

Иконки

Коллекция Material Icons включает более 2 000 иконок в пяти стилях:

• Линейные
• С заливкой
• Со скругленными углами
• С острыми углами
• Двухцветные

Вы можете скачать Material Icons для веб в формате SVG или PNG или использовать фрагменты кода для Android, iOS и Flutter. Вы также можете подключить стили с GitHub, разместив соответствующий код внутри тега <head> в HTML-файле.

Типографика

Типографика — важнейший элемент UI-дизайна и брендинга. Стандартные гарнитуры Material Design для Android: Roboto и Noto Sans. Последняя включает более 150 шрифтов и поддерживает более 800 языков, поэтому вы при необходимости легко переведете свой продукт, сохранив эстетику и целостность — огромный плюс для компаний с международной пользовательской базой.

Конечно, при желании вы можете свободно использовать обширную библиотеку шрифтов Google или установить собственный шрифт.

Material Design: анимация и взаимодействие

Иногда самые маленькие детали имеют большое значение. Микровзаимодействия, от будильника до текстовых сообщений и уведомлений практически любого вида, играют чрезвычайно важную роль в нашей повседневной жизни. 

Проектирование микровзаимодействий на основе Material Design поможет вам понять, как и зачем создавать то, с чем ваши пользователи захотят взаимодействовать.

Микровзаимодействия выполняют следующие функции:

• Придают интерфейсу ясность и предоставляют обратную связь. 
• Транслируют указания и рекомендации. 
• Показывают или предотвращают ошибки. 
• Повышают вовлеченность и подталкивают пользователей к взаимодействию. 
• Помогают создать более впечатляющий брендинг.

Хотя микровзаимодействия встречаются повсюду, Material Design прекрасно раскрывает эту концепцию, указывая, что любое отзывчивое взаимодействие побуждает людей двигаться дальше. Хотя микровзаимодействия могут вызывать восторг и удивление, конечная цель заключается в том, чтобы побудить пользователей к дальнейшему изучению продукта.

Material Design включает подробное руководство по анимации и взаимодействию.

Анимация

Речь идет об анимационных эффектах, которые, по словам представителей Google, «помогают сделать интерфейс выразительным и простым в использовании«.

В Material Design обозначено 3 принципа анимации:

• Информативность: Помогает информировать пользователей, обозначая взаимосвязи между элементами, доступность действий и их результаты.
• Фокус: Показывает пользователям самое важное, не отвлекая их от выполнения задачи.
• Выразительность: Отмечает значимые моменты пути пользователя, придает характер привычным взаимодействиям и может быть частью брендинга.

Руководство по анимации (Motion) от Material — это настоящий мастер-класс для UX-дизайнеров. Здесь вы найдете следующие разделы:

• Моушн-система: набор паттернов переходов, которые помогут пользователям сориентироваться в приложении.
• Скорость: настройка переходов, чтобы они были плавными и отзывчивыми.
• Хореография: согласованная последовательность движений, которая удерживает внимание пользователя, когда в интерфейсе происходят изменения.
• Кастомизация: настройка анимации таким образом, чтобы она отражала стиль вашего бренда.

Взаимодействие

Взаимодействие в Material Design — движения и анимации, которые запускаются в результате взаимодействия пользователя с интерфейсом.

• Жесты: позволяют пользователям взаимодействовать с элементами на экране посредством касаний.
• Выбор: как пользователи указывают конкретные элементы, в отношении которых они собираются совершить действие.
• Состояния: визуальное отображение состояния компонента или интерактивного элемента.

Документация Material Design содержит подробное описание распространенных ошибок, а также того, как дизайнеры должны использовать взаимодействия того или иного вида. 

Например, в Material интерфейс реагирует на жесты пользователя в режиме реального времени, чтобы тот ощущал, что он полностью контролирует ситуацию. Именно от касания человека зависит, насколько быстро или медленно проигрывается анимация, что позволяет обеспечить аутентичный опыт взаимодействия.

Material Design 3

В мае 2021 года Google анонсировал новый усовершенствованный Material Design 3, который компания называет «самой выразительной и адаптируемой дизайн-системой«. Material Design 3 был впервые выпущен на Android 12 и Google Pixel и появился на других устройствах в 2021 году.

Вот 3 нововведения Material Design 3.

Динамический цвет

Динамический цвет — новая функция Material Design. Она позволяет пользователям настраивать внешний вид интерфейса, выбирая обои и меняя другие параметры настройки.

Это алгоритм, который сканирует обои пользователя и создает 5 тональных палитр акцентных и нейтральных цветов. Затем устройство использует эти цвета для настроек, меню и приложений Android.

Складные устройства

Еще один раздел Material Design 3 — особенности UI для складных устройств. Важное дополнение — Postures. Это уникальная для складных телефонов конфигурация экрана, показывающая, когда устройство сложено или раскрыто. Postures могут распространяться на развернутый альбомный и развернутый портретный режимы, каждый из которых имеет свой размер экрана и соотношение сторон.

Другие аспекты Material Design для складных устройств:

• Досягаемость: Что происходит, когда пользователи не могут дотянуться до тех или иных областей экрана раскрытого устройства.
• Центральный шарнир: Шарниры, которые образуют пространство между сгибом экрана и контентом.
• Разделение экрана: Лейауты для раскрытых складных устройств.

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

Дизайн-токены позволяют хранить значения стилей, таких как цвет и шрифты, для последующего применения в дизайне, коде, инструментах и на платформах. Их предназначение состоит в том, чтобы помочь организациям упростить создание, поддержку и обновление дизайн-систем.

Эта фантастическая функция дает дизайнерам и инженерам возможность использовать одни и те же цвета и шрифты, чтобы избежать несогласованности.

Material Icons — Material UI

2,114 matching results

AcUnit

AccessAlarm

AccessAlarms

AccessTime

AccessTimeFilled

Accessibility

AccessibilityNew

Accessible

AccessibleForward

AccountBalance

AccountBalanceWallet

AccountBox

AccountCircle

AccountTree

AdUnits

AddAPhoto

AddAlarm

AddAlert

AddBox

AddBusiness

AddCard

AddCircle

AddCircleOutline

AddComment

AddHome

AddHomeWork

AddIcCall

AddLink

AddLocation

AddLocationAlt

AddModerator

AddPhotoAlternate

AddReaction

AddRoad

AddShoppingCart

AddTask

AddToDrive

AddToHomeScreen

AddToPhotos

AddToQueue

Addchart

AdfScanner

Adjust

AdminPanelSettings

Agriculture

AirlineSeatFlat

AirlineSeatFlatAngled

AirlineSeatIndividualSuite

AirlineSeatLegroomExtra

AirlineSeatLegroomNormal

AirlineSeatLegroomReduced

AirlineSeatReclineExtra

AirlineSeatReclineNormal

AirlineStops

Авиалинии

AirplaneTicket

AirplanemodeActive

AirplanemodeInactive

Airplay

AirportShuttle

AlarmAdd

AlarmOff

AlarmOn

AlignHorizontalCenter

AlignHorizontalLeft

AlignHorizontalRight

AlignVerticalBottom

AlignVerticalCenter

AlignVerticalTop

AllInbox

AllInclusive

AllOut

AltRoute

AlternateEmail

Analytics

Anchor

Android

Animation

Announcement

Apartment

AppBlocking

AppRegistration

AppSettingsAlt

AppShortcut

Approval

AppsOutage

Architecture

Archive

ArrowBack

ArrowBackIos

ArrowBackIosNew

ArrowCircleDown

ArrowCircleLeft

ArrowCircleRight

ArrowCircleUp

ArrowDownward

ArrowDropDown

ArrowDropDownCircle

ArrowDropUp

ArrowForward

ArrowForwardIos

ArrowLeft

ArrowOutward

ArrowRight

ArrowRightAlt

ArrowUpward

ArtTrack

Article

AspectRatio

Assessment

Assignment

AssignmentInd

AssignmentLate

AssignmentReturn

AssignmentReturned

AssignmentTurnedIn

AssistWalker

Assistant

AssistantDirection

AssistantPhoto

AssuredWorkload

AttachEmail

AttachFile

AttachMoney

Attachment

Attractions

Attribution

AudioFile

Audiotrack

AutoAwesome

AutoAwesomeMosaic

AutoAwesomeMotion

AutoDelete

AutoFixHigh

AutoFixNormal

AutoFixOff

AutoGraph

AutoMode

AutoStories

AutofpsSelect

Autorenew

AvTimer

BabyChangingStation

Backpack

Backspace

Backup

BackupTable

BakeryDining

Balance

Балкон

Бюллетень

BarChart

BatchPrediction

Ванная

Bathtub

Battery0Bar

Battery1Bar

Battery20

Battery2Bar

Battery30

Battery3Bar

Battery4Bar

Battery50

Battery5Bar

Battery60

Battery6Bar

Battery80

Battery90

BatteryAlert

BatteryCharging20

BatteryCharging30

BatteryCharging50

BatteryCharging60

BatteryCharging80

BatteryCharging90

BatteryChargingFull

BatteryFull

BatterySaver

BatteryStd

BatteryUnknown

BeachAccess

BedroomBaby

BedroomChild

BedroomParent

Bedtime

BedtimeOff

Beenhere

BikeScooter

Biotech

Blender

Жалюзи

ЖалюзиЗакрытые

Группа крови

Bluetooth

BluetoothAudio

BluetoothConnected

BluetoothDisabled

BluetoothDrive

BluetoothSearching

BlurCircular

BlurLinear

BlurOff

BlurOn

BookOnline

Bookmark

BookmarkAdd

BookmarkAdded

BookmarkBorder

BookmarkRemove

Bookmarks

BorderAll

BorderBottom

BorderClear

BorderColor

BorderHorizontal

BorderInner

BorderLeft

BorderOuter

BorderRight

BorderStyle

BorderTop

BorderVertical

BrandingWatermark

BreakfastDining

Brightness1

Brightness2

Brightness3

Brightness4

Brightness5

Brightness6

Яркость7

ЯркостьАвто

ЯркостьВысокая

BrightnessLow

BrightnessMedium

BroadcastOnHome

BroadcastOnPersonal

BrokenImage

BrowseGallery

BrowserNotSupported

BrowserUpdated

BrunchDining

BubbleChart

BugReport

BuildCircle

Bungalow

BurstMode

BusAlert

Business

BusinessCenter

Кэшировано

Рассчитать

CalendarMonth

CalendarToday

CalendarViewDay

CalendarViewMonth

CalendarViewWeek

CallEnd

CallMade

CallMerge

CallMissed

CallMissedOutgoing

CallReceived

CallSplit

CallToAction

Camera

CameraAlt

CameraEnhance

CameraFront

Камера Внутренняя

Камера Наружная

Камера Задняя

Камера Рулон

Cameraswitch

Campaign

Cancel

CancelPresentation

CancelScheduleSend

CandlestickChart

CarCrash

CarRental

CarRepair

CardGiftcard

CardMembership

CardTravel

Carpenter

Casino

CastConnected

CastForEducation

Замок

Ловля покемонов

Категория

Празднование

CellTower

CellWifi

CenterFocusStrong

CenterFocusWeak

ChairAlt

Chalet

ChangeCircle

ChangeHistory

ChargingStation

ChatBubble

ChatBubbleOutline

CheckBox

CheckBoxOutlineBlank

CheckCircle

CheckCircleOutline

Checkroom

ChevronLeft

ChevronRight

Уход за детьми

ChildFriendly

ChromeReaderMode

Church

Circle

CircleNotifications

CleanHands

CleaningServices

ClearAll

CloseFullscreen

ClosedCaption

ClosedCaptionDisabled

ClosedCaptionOff

CloudCircle

CloudDone

CloudDownload

CloudOff

CloudQueue

CloudSync

CloudUpload

CoPresent

CodeOff

Coffee

CoffeeMaker

Collections

CollectionsBookmark

ColorLens

Colorize

Comment

CommentBank

CommentsDisabled

Commit

Commute

Compare

CompareArrows

CompassCalibration

Compress

Компьютер

ConfirmationNumber

ConnectWithoutContact

ConnectedTv

ConnectingAirports

Construction

ContactEmergency

ContactMail

ContactPage

ContactPhone

ContactSupport

Contactless

Contacts

ContentCopy

ContentCut

ContentPaste

ContentPasteGo

ContentPasteOff

ContentPasteSearch

Contrast

ControlCamera

ControlPoint

ControlPointDuplicate

Cookie

CopyAll

Copyright

Coronavirus

CorporateFare

Cottage

Countertops

Create

CreateNewFolder

CreditCard

CreditCardOff

CreditScore

CrisisAlert

Crop169

Crop32

Crop54

Crop75

CropDin

CropFree

CropLandscape

CropOriginal

CropPortrait

CropRotate

CropSquare

CurrencyBitcoin

CurrencyExchange

CurrencyFranc

CurrencyLira

CurrencyPound

CurrencyRuble

CurrencyRupee

CurrencyYen

CurrencyYuan

Curtains

CurtainsClosed

Cyclone

Dangerous

DarkMode

Dashboard

DashboardCustomize

DataArray

DataObject

DataSaverOff

DataSaverOn

DataThresholding

DataUsage

Dataset

DatasetLinked

DateRange

Deblur

Dehaze

Delete

DeleteForever

DeleteOutline

DeleteSweep

DeliveryDining

DensityLarge

DensityMedium

DensitySmall

DepartureBoard

Описание

Отменить выбор

DesignServices

DesktopAccessDisabled

DesktopMac

DesktopWindows

Details

DeveloperBoard

DeveloperBoardOff

DeveloperMode

DeviceHub

DeviceThermostat

DeviceUnknown

Devices

DevicesFold

DevicesOther

DialerSip

Dialpad

Diamond

Разница

Обеденная

УжинОбеденная

Directions

DirectionsBike

DirectionsBoat

DirectionsBoatFilled

DirectionsBus

DirectionsBusFilled

DirectionsCar

DirectionsCarFilled

DirectionsOff

DirectionsRailway

DirectionsRailwayFilled

DirectionsRun

DirectionsSubway

DirectionsSubwayFilled

DirectionsTransit

DirectionsTransitFilled

НаправленияПрогулка

DirtyLens

DisabledByDefault

DiscFull

Discount

DisplaySettings

Diversity1

Diversity2

Diversity3

DoDisturb

DoDisturbAlt

DoDisturbOff

DoDisturbOn

DoNotDisturb

DoNotDisturbAlt

DoNotDisturbOff

DoNotDisturbOn

DoNotDisturbOnTotalSilence

DoNotStep

DoNotTouch

DocumentScanner

Domain

DomainAdd

DomainDisabled

DomainVerification

DoneAll

DoneOutline

DonutLarge

DonutSmall

DoorBack

DoorFront

DoorSliding

Doorbell

DoubleArrow

DownhillSkiing

Download

DownloadDone

DownloadForOffline

Downloading

Drafts

DragHandle

DragIndicator

DriveEta

DriveFileMove

DriveFileRenameOutline

DriveFolderUpload

DryCleaning

DynamicFeed

DynamicForm

EMobiledata

Earbuds

EarbudsBattery

EdgesensorHigh

EdgesensorLow

EditAttributes

EditLocation

EditLocationAlt

EditNotifications

EditOff

EditRoad

EggAlt

EightK

EightKPlus

EightMp

EighteenMp

EighteenUpRating

EightteenMp

Elderly

ElderlyWoman

ElectricBike

ElectricBolt

ElectricCar

ElectricMeter

ElectricMoped

ElectricRickshaw

ElectricScooter

ElectricServices

Лифт

ElevenMp

EmergencyRecording

EmergencyShare

EmojiEmotions

EmojiEvents

EmojiFlags

EmojiFoodBeverage

EmojiNature

EmojiObjects

EmojiPeople

EmojiSymbols

EmojiTransportation

EnergySavingsLeaf

Engineering

EnhancedEncryption

Equalizer

ErrorOutline

Escalator

EscalatorWarning

EuroSymbol

EvStation

EventAvailable

EventBusy

EventNote

EventRepeat

EventSeat

ExitToApp

Expand

ExpandCircleDown

ExpandLess

ExpandMore

Explicit

Explore

ExploreOff

Exposure

Extension

ExtensionOff

FaceRetouchingNatural

FaceRetouchingOff

Facebook

FactCheck

Factory

FamilyRestroom

FastForward

FastRewind

Fastfood

Favorite

FavoriteBorder

FeaturedPlayList

FeaturedVideo

Feedback

Female

Festival

FiberDvr

FiberManualRecord

FiberNew

FiberPin

FiberSmartRecord

FifteenMp

FileCopy

FileDownload

FileDownloadDone

FileDownloadOff

FileOpen

FilePresent

FileUpload

Filter

Filter1

Filter2

Filter3

Filter4

Filter5

Filter6

Filter7

Filter8

Filter9

Filter9Plus

FilterAlt

FilterAltOff

FilterBAndW

FilterCenterFocus

FilterDrama

FilterFrames

FilterHdr

FilterList

FilterListOff

FilterNone

FilterTiltShift

FilterVintage

FindInPage

FindReplace

Fingerprint

FireExtinguisher

FireHydrantAlt

FireTruck

Fireplace

FirstPage

FitScreen

Fitbit

FitnessCenter

FiveKPlus

FiveMp

FivteenMp

FlagCircle

FlashAuto

FlashOff

FlashOn

FlashlightOff

FlashlightOn

Flatware

Flight

FlightClass

FlightLand

FlightTakeoff

FlipCameraAndroid

FlipCameraIos

FlipToBack

FlipToFront

Fluorescent

FlutterDash

FmdBad

FmdGood

Folder

FolderCopy

FolderDelete

FolderOff

FolderOpen

FolderShared

FolderSpecial

FolderZip

FollowTheSigns

FontDownload

FontDownloadOff

FoodBank

Forest

ForkLeft

ForkRight

FormatAlignCenter

FormatAlignJustify

FormatAlignLeft

FormatAlignRight

FormatBold

FormatClear

FormatColorFill

FormatColorReset

FormatColorText

FormatIndentDecrease

FormatIndentIncrease

FormatItalic

FormatLineSpacing

FormatListBulleted

FormatListNumbered

FormatListNumberedRtl

FormatOverline

FormatPaint

FormatQuote

FormatShapes

FormatSize

FormatStrikethrough

FormatTextdirectionLToR

FormatTextdirectionRToL

FormatUnderlined

Forward

Forward10

Forward30

Forward5

ForwardToInbox

Foundation

FourGMobiledata

FourGPlusMobiledata

FourKPlus

FourMp

FourteenMp

FreeBreakfast

Fullscreen

FullscreenExit

Functions

GMobiledata

GTranslate

Геймпад

Гараж

Газовый счетчик

Жест

GetApp

GifBox

GitHub

GolfCourse

Google

GppBad

GppGood

GppMaybe

GpsFixed

GpsNotFixed

GpsOff

Gradient

Grading

GraphicEq

Grid3x3

Grid4x4

GridGoldenratio

GridOff

GridOn

GridView

GroupAdd

GroupRemove

GroupWork

Groups

Groups2

Groups3

HMobiledata

HPlusMobiledata

Handshake

Handyman

Hardware

HdrAuto

HdrAutoSelect

HdrEnhancedSelect

HdrOff

HdrOffSelect

HdrOnSelect

HdrPlus

HdrStrong

HdrWeak

Наушники

Наушники Аккумулятор

Гарнитура

ГарнитураМикрофон

Hearsetoff

Healing

HealthandSafety

Слух

Слух.

Пешие прогулки

История

ИсторияEdu

ИсторияToggleOff

HlsOff

HolidayVillage

HomeMax

HomeMini

HomeRepairService

HomeWork

HorizontalRule

HorizontalSplit

HotTub

HourglassBottom

HourglassDisabled

HourglassEmpty

HourglassFull

HourglassTop

HouseSiding

Houseboat

HowToReg

HowToVote

Катание на коньках

Мороженое

ImageAspectRatio

ImageNotSupported

ImageSearch

ImagesearchRoller

ImportContacts

ImportExport

ImportantDevices

IndeterminateCheckBox

InsertChart

InsertComment

InsertDriveFile

InsertEmoticon

InsertInvitation

InsertLink

InsertPageBreak

InsertPhoto

Insights

Instagram

InstallDesktop

InstallMobile

IntegrationInstructions

Interests

InterpreterMode

Inventory

Inventory2

InvertColors

InvertColorsOff

IosShare

Javascript

JoinFull

JoinInner

JoinLeft

JoinRight

Kayaking

KebabDining

KeyOff

Keyboard

KeyboardAlt

KeyboardArrowDown

KeyboardArrowLeft

KeyboardArrowRight

KeyboardArrowUp

KeyboardBackspace

KeyboardCapslock

KeyboardCommandKey

KeyboardControlKey

KeyboardDoubleArrowDown

KeyboardDoubleArrowLeft

KeyboardDoubleArrowRight

KeyboardDoubleArrowUp

KeyboardHide

KeyboardOptionKey

KeyboardReturn

KeyboardTab

KeyboardVoice

KingBed

Kitchen

Kitesurfing

LabelImportant

LabelOff

Landscape

Landslide

Language

Laptop

LaptopChromebook

LaptopMac

LaptopWindows

LastPage

Launch

Layers

LayersClear

Leaderboard

LeakAdd

LeakRemove

LegendToggle

LensBlur

LibraryAdd

LibraryAddCheck

LibraryBooks

LibraryMusic

LightMode

Lightbulb

LightbulbCircle

LineAxis

LineStyle

LineWeight

LinearScale

LinkOff

LinkedCamera

LinkedIn

Liquor

ListAlt

LiveHelp

LiveTv

Living

LocalActivity

LocalAirport

LocalAtm

LocalBar

LocalCafe

LocalCarWash

LocalConvenienceStore

LocalDining

LocalDrink

LocalFireDepartment

LocalFlorist

LocalGasStation

LocalGroceryStore

LocalHospital

LocalHotel

LocalLaundryService

LocalLibrary

LocalMall

LocalMovies

LocalOffer

Местная парковка

Местная аптека

LocalPhone

LocalPizza

LocalPlay

LocalPolice

LocalPostOffice

LocalPrintshop

LocalSee

LocalShipping

LocalTaxi

LocationCity

LocationDisabled

LocationOff

LocationOn

LocationSearching

LockClock

LockOpen

LockPerson

LockReset

LogoDev

Выход из системы

Looks3

Looks4

Looks5

Looks6

LooksOne

LooksTwo

LowPriority

Loyalty

LteMobiledata

LtePlusMobiledata

Luggage

LunchDining

Lyrics

MacroOff

MailLock

MailOutline

ManageAccounts

ManageHistory

ManageSearch

MapsHomeWork

MapsUgc

Margin

MarkAsUnread

MarkChatRead

MarkChatUnread

MarkEmailRead

MarkEmailUnread

MarkUnreadChatAlt

Markunread

MarkunreadMailbox

Maximize

MediaBluetoothOff

MediaBluetoothOn

Mediation

MedicalInformation

MedicalServices

Medication

MedicationLiquid

MeetingRoom

Память

MenuBook

MenuOpen

MergeType

Message

MicExternalOff

MicExternalOn

MicNone

MicOff

Microwave

MilitaryTech

Minimize

MinorCrash

MiscellaneousServices

MissedVideoCall

MobileFriendly

MobileOff

MobileScreenShare

MobiledataOff

ModeComment

ModeEdit

ModeEditOutline

ModeFanOff

ModeNight

ModeOfTravel

ModeStandby

ModelTraining

MonetizationOn

MoneyOff

MoneyOffCsred

Monitor

MonitorHeart

MonitorWeight

MonochromePhotos

MoodBad

MoreHoriz

MoreTime

MoreVert

Мечеть

MotionPhotosAuto

MotionPhotosOff

MoveDown

MoveToInbox

MoveUp

MovieCreation

MovieFilter

Moving

MultilineChart

MultipleStop

Museum

MusicNote

MusicOff

MusicVideo

MyLocation

Nature

NaturePeople

NavigateBefore

NavigateNext

Navigation

NearMe

NearMeDisabled

NearbyError

NearbyOff

NestCamWiredStand

NetworkCell

NetworkCheck

NetworkLocked

NetworkPing

NetworkWifi

NetworkWifi1Bar

NetworkWifi2Bar

NetworkWifi3Bar

NewReleases

Newspaper

NextPlan

NextWeek

NightShelter

Nightlife

Nightlight

NightlightRound

NightsStay

NineKPlus

NineMp

NineteenMp

NoAccounts

NoAdultContent

NoBackpack

NoCell

NoCrash

NoDrinks

NoEncryption

NoEncryptionGmailerrorred

NoFlash

NoFood

NoLuggage

NoMeals

NoMeetingRoom

NoPhotography

NoStroller

NoTransfer

NoiseAware

NoiseControlOff

NordicWalking

NorthEast

NorthWest

NotAccessible

NotInterested

NotListedLocation

NotStarted

NoteAdd

NoteAlt

NotificationAdd

NotificationImportant

Notifications

NotificationsActive

NotificationsNone

NotificationsOff

NotificationsPaused

Numbers

OfflineBolt

OfflinePin

OfflineShare

OilBarrel

OnDeviceTraining

OndemandVideo

OneKPlus

OnlinePrediction

Opacity

OpenInBrowser

OpenInFull

OpenInNew

OpenInNewOff

OpenWith

OtherHouses

Outbound

Outbox

OutdoorGrill

Outlet

Output

Padding

Просмотр страницы

Палитра

PanTool

PanToolAlt

Panorama

PanoramaFishEye

PanoramaHorizontal

PanoramaHorizontalSelect

PanoramaPhotosphere

PanoramaPhotosphereSelect

PanoramaVertical

PanoramaVerticalSelect

PanoramaWideAngle

PanoramaWideAngleSelect

Paragliding

PartyMode

Password

Pattern

PauseCircle

PauseCircleFilled

PauseCircleOutline

PausePresentation

Payment

Payments

PedalBike

Pending

PendingActions

Pentagon

People

PeopleAlt

PeopleOutline

Percent

PermCameraMic

PermContactCalendar

PermDataSetting

PermDeviceInformation

PermIdentity

PermMedia

PermPhoneMsg

PermScanWifi

Лицо

Person2

Person3

Person4

PersonAdd

PersonAddAlt

PersonAddAlt1

PersonAddDisabled

PersonOff

PersonOutline

PersonPin

PersonPinCircle

PersonRemove

PersonRemoveAlt1

PersonSearch

PersonalVideo

PestControl

PestControlRodent

Фишинг

ТелефонAndroid

ТелефонBluetoothДинамик

PhoneCallback

PhoneDisabled

PhoneEnabled

PhoneForwarded

PhoneInTalk

PhoneIphone

PhoneLocked

PhoneMissed

PhonePaused

Phonelink

PhonelinkErase

PhonelinkLock

PhonelinkOff

PhonelinkRing

PhonelinkSetup

PhotoAlbum

Фотокамера

ФотокамераЗадняя

ФотокамераПередняя

PhotoFilter

PhotoLibrary

PhotoSizeSelectActual

PhotoSizeSelectLarge

PhotoSizeSelectSmall

PianoOff

PictureAsPdf

PictureInPicture

PictureInPictureAlt

PieChart

PieChartOutline

PinDrop

Pinterest

PivotTableChart

Plagiarism

PlayArrow

PlayCircle

PlayCircleFilled

PlayCircleFilledWhite

PlayCircleOutline

PlayDisabled

PlayForWork

PlayLesson

PlaylistAdd

PlaylistAddCheck

PlaylistAddCheckCircle

PlaylistAddCircle

PlaylistPlay

PlaylistRemove

Plumbing

PlusOne

Podcasts

PointOfSale

Policy

Polyline

PortableWifiOff

Портрет

PostAdd

PowerInput

PowerOff

PowerSettingsNew

PrecisionManufacturing

PregnantWoman

PresentToAll

Preview

PriceChange

PriceCheck

PrintDisabled

PriorityHigh

PrivacyTip

ProductionQuantityLimits

Propane

PropaneTank

Psychology

PsychologyAlt

Public

PublicOff

Publish

PublishedWithChanges

PunchClock

PushPin

QrCode

QrCode2

QrCodeScanner

QueryBuilder

QueryStats

QuestionAnswer

QuestionMark

QueueMusic

QueuePlayNext

Quickreply

RMobiledata

RadioButtonChecked

RadioButtonUnchecked

RailwayAlert

RamenDining

RampLeft

RampRight

RateReview

RawOff

ReadMore

Receipt

ReceiptLong

RecentActors

Recommend

RecordVoiceOver

Rectangle

Reddit

Redeem

ReduceCapacity

Refresh

RememberMe

Remove

RemoveCircle

RemoveCircleOutline

RemoveDone

RemoveFromQueue

RemoveModerator

RemoveRedEye

RemoveRoad

RemoveShoppingCart

Reorder

Repartition

Repeat

RepeatOn

RepeatOne

RepeatOneOn

Replay

Replay10

Replay30

Replay5

ReplayCircleFilled

ReplyAll

Report

ReportGmailerrorred

ReportOff

ReportProblem

RequestPage

RequestQuote

ResetTv

RestartAlt

Restaurant

RestaurantMenu

Restore

RestoreFromTrash

RestorePage

Reviews

RiceBowl

RingVolume

Rocket

RocketLaunch

RollerShades

RollerShadesClosed

RollerSkating

Roofing

RoomPreferences

RoomService

Повернуть на 90 градусов по часовой стрелке

Повернуть на 90 градусов по часовой стрелке

Повернуть влево

Повернуть вправо

RoundaboutLeft

RoundaboutRight

Router

Rowing

RssFeed

RuleFolder

RunCircle

RunningWithErrors

RvHookup

SafetyCheck

SafetyDivider

Sailing

Sanitizer

Satellite

SatelliteAlt

SaveAlt

SaveAs

SavedSearch

Savings

Scanner

ScatterPlot

Schedule

ScheduleSend

Schema

School

Science

Scoreboard

ScreenLockLandscape

ScreenLockPortrait

ScreenLockRotation

ScreenRotation

ScreenRotationAlt

ScreenSearchDesktop

ScreenShare

Screenshot

ScreenshotMonitor

ScubaDiving

SdCard

SdCardAlert

SdStorage

Поиск

SearchOff

Security

SecurityUpdate

SecurityUpdateGood

SecurityUpdateWarning

Segment

SelectAll

SelfImprovement

SendAndArchive

SendTimeExtension

SendToMobile

SensorDoor

SensorOccupied

SensorWindow

Sensors

SensorsOff

НастроениеНедовольно

НастроениеНейтрально

НастроениеУдовлетворено

SentimentSatisfiedAlt

SentimentVeryDissatisfied

SentimentVerySatisfied

SetMeal

Settings

SettingsAccessibility

SettingsApplications

SettingsBackupRestore

SettingsBluetooth

SettingsBrightness

SettingsCell

SettingsEthernet

SettingsInputAntenna

SettingsInputComponent

SettingsInputComposite

SettingsInputHdmi

SettingsInputSvideo

SettingsOverscan

SettingsPhone

SettingsPower

SettingsRemote

SettingsSuggest

SettingsSystemDaydream

SettingsVoice

SevenK

SevenKPlus

SevenMp

SeventeenMp

SevereCold

ShapeLine

ShareLocation

Shield

ShieldMoon

ShopTwo

Сумка для покупок

Корзина для покупок

ShoppingCart

ShoppingCartCheckout

ShortText

Shortcut

ShowChart

Shower

Shuffle

ShuffleOn

ShutterSpeed ​​

SignLanguage

SignalCellular0Bar

SignalCellular1Bar

SignalCellular2Bar

SignalCellular3Bar

SignalCellular4Bar

SignalCellularAlt

SignalCellularAlt1Bar

SignalCellularAlt2Bar

SignalCellularConnectedNoInternet0Bar

SignalCellularConnectedNoInternet1Bar

SignalCellularConnectedNoInternet2Bar

SignalCellularConnectedNoInternet3Bar

SignalCellularConnectedNoInternet4Bar

SignalCellularNoSim

SignalCellularNodata

SignalCellularNull

SignalCellularOff

SignalWifi0Bar

SignalWifi1Bar

SignalWifi1BarLock

SignalWifi2Bar

SignalWifi2BarLock

SignalWifi3Bar

SignalWifi3BarLock

SignalWifi4Bar

SignalWifi4BarLock

SignalWifiBad

SignalWifiConnectedNoInternet4

SignalWifiOff

SignalWifiStatusbar4Bar

SignalWifiStatusbarConnectedNoInternet4

SignalWifiStatusbarNull

Signpost

SimCard

SimCardAlert

SimCardDownload

SingleBed

SixKPlus

SixteenMp

SixtyFps

SixtyFpsSelect

Skateboarding

SkipNext

SkipPrevious

Sledding

Slideshow

SlowMotionVideo

SmartButton

SmartDisplay

SmartScreen

SmartToy

Smartphone

SmokeFree

SmokingRooms

SmsFailed

SnippetFolder

Повтор

Сноубординг

Snowmobile

Snowshoeing

SocialDistance

SolarPower

SortByAlpha

SoupKitchen

Source

SouthAmerica

SouthEast

SouthWest

SpaceBar

SpatialAudio

SpatialAudioOff

SpatialTracking

Speaker

SpeakerGroup

SpeakerNotes

SpeakerNotesOff

SpeakerPhone

Проверка орфографии

Splitscreen

Sports

SportsBar

SportsBaseball

SportsBasketball

SportsCricket

SportsEsports

SportsFootball

SportsGolf

SportsGymnastics

SportsHandball

SportsHockey

SportsKabaddi

SportsMartialArts

SportsMma

SportsMotorsports

СпортРегби

SportsScore

СпортФутбол

SportsTennis

SportsVolleyball

Square

SquareFoot

SsidChart

StackedBarChart

StackedLineChart

Stadium

Stairs

StarBorder

StarBorderPurple500

StarHalf

StarOutline

StarPurple500

StarRate

StayCurrentLandscape

StayCurrentPortrait

StayPrimaryLandscape

StayPrimaryPortrait

StickyNote2

StopCircle

StopScreenShare

Storage

StoreMallDirectory

Storefront

Straight

Straighten

Stream

Streetview

StrikethroughS

Stroller

SubdirectoryArrowLeft

SubdirectoryArrowRight

Subject

Subscript

Подписки

Субтитры

СубтитрыВыкл.

Метро

Summarize

Superscript

SupervisedUserCircle

SupervisorAccount

Support

SupportAgent

Surfing

SurroundSound

SwapCalls

SwapHoriz

SwapHorizontalCircle

SwapVert

SwapVerticalCircle

SwipeDown

SwipeDownAlt

SwipeLeft

SwipeLeftAlt

SwipeRight

SwipeRightAlt

SwipeUp

SwipeUpAlt

SwipeVertical

SwitchAccessShortcut

SwitchAccessShortcutAdd

SwitchAccount

SwitchCamera

SwitchLeft

SwitchRight

SwitchVideo

Synagogue

SyncAlt

SyncDisabled

SyncLock

SyncProblem

SystemSecurityUpdate

SystemSecurityUpdateGood

SystemSecurityUpdateWarning

SystemUpdate

SystemUpdateAlt

TabUnselected

TableBar

TableChart

TableRestaurant

TableRows

TableView

Tablet

TabletAndroid

TabletMac

TagFaces

TakeoutDining

TapAndPlay

TaskAlt

TaxiAlert

Telegram

TempleBuddhist

TempleHindu

Terminal

Terrain

TextDecrease

TextFields

TextFormat

TextIncrease

TextRotateUp

TextRotateVertical

TextRotationAngledown

TextRotationAngleup

TextRotationDown

TextRotationNone

TextSnippet

Textsms

Texture

TheaterComedy

Theaters

Thermostat

ThermostatAuto

Тринадцать мегапикселей

Тридцать кадров в секунду

Тридцать кадров в секундуВыбрать

ThreeDRotation

ThreeGMobiledata

ThreeK

ThreeKPlus

ThreeMp

ThreeP

ThreeSixty

ThumbDown

ThumbDownAlt

ThumbDownOffAlt

ThumbUp

ThumbUpAlt

ThumbUpOffAlt

ThumbsUpDown

Thunderstorm

TimeToLeave

Timelapse

Timeline

Timer10

Timer10Select

Timer3

Timer3Select

TimerOff

TimesOneMobiledata

TipsAndUpdates

TireRepair

ToggleOff

ToggleOn

Tonality

Tornado

TouchApp

TrackChanges

Traffic

Transcribe

TransferWithinAStation

Transform

Transgender

TransitEnterexit

Перевод

TravelExplore

TrendingDown

TrendingFlat

TrendingUp

TripOrigin

Troubleshoot

Tsunami

Tungsten

TurnLeft

TurnRight

TurnSlightLeft

TurnSlightRight

TurnedIn

TurnedInNot

TwelveMp

TwentyFourMp

TwentyOneMp

TwentyThreeMp

TwentyTwoMp

TwentyZeroMp

Twitter

TwoKPlus

TwoWheeler

TypeSpecimen

UTurnLeft

UTurnRight

Umbrella

Unarchive

UnfoldLess

UnfoldLessDouble

UnfoldMore

UnfoldMoreDouble

Unpublished

Unsubscribe

Upcoming

Update

UpdateDisabled

Upgrade

Upload

UploadFile

UsbOff

Вакцины

VapeFree

VapingRooms

Verified

VerifiedUser

VerticalAlignBottom

VerticalAlignCenter

VerticalAlignTop

VerticalShades

VerticalShadesClosed

VerticalSplit

Vibration

VideoCall

VideoCameraBack

VideoCameraFront

VideoChat

VideoFile

VideoLabel

VideoLibrary

VideoSettings

Стабильная видеокамера

Видеокамера

VideocamOff

VideogameAsset

VideogameAssetOff

ViewAgenda

ViewArray

ViewCarousel

ViewColumn

ViewComfy

ViewComfyAlt

ViewCompact

ViewCompactAlt

ViewCozy

ViewDay

ViewHeadline

ViewInAr

ViewKanban

ViewList

ViewModule

ViewQuilt

ViewSidebar

ViewStream

ViewTimeline

ViewWeek

Vignette

Visibility

VisibilityOff

VoiceChat

VoiceOverOff

Voicemail

Volcano

VolumeDown

VolumeMute

VolumeOff

VolumeUp

VolunteerActivism

VpnKey

VpnKeyOff

VpnLock

Vrpano

Кошелек

Обои

Склад

Предупреждение

WarningAmber

WatchLater

WatchOff

WaterDamage

WaterfallChart

WbAuto

WbCloudy

WbIncandescent

WbIridescent

WbShade

WbSunny

WbTwilight

WebAsset

WebAssetOff

WebStories

Webhook

Выходные

WhatsApp

Whatshot

WheelchairPickup

WhereToVote

Widgets

WidthFull

WidthNormal

WidthWide

Wifi1Bar

Wifi2Bar

WifiCalling

WifiCalling3

WifiChannel

WifiFind

WifiLock

WifiOff

WifiPassword

WifiProtectedSetup

WifiTethering

WifiTetheringError

WifiTetheringOff

WindPower

Окно

WineBar

Женщина2

WorkHistory

WorkOff

WorkOutline

WorkspacePremium

Workspaces

WrapText

WrongLocation

Wysiwyg

YouTube

YoutubeSearchedFor

ZoomIn

ZoomInMap

ZoomOut

ZoomOutMap

Material Design Icons DX

10к

10к

10мп

10мп

11мп

11mp

123

123

12mp

12mp

13mp

13mp

14mp

14mp

15mp

15mp

16mp

16MP

17MP

17MP

18_UP_RATION

18_UP_RATION

18MP

18MP

19. mp

19mp

1k_plus

1k_plus

1x_mobiledata

1x_mobiledata

20mp

20mp

21mp

21mp

22mp

22mp

23mp

23MP

24MP

24MP

2K_PLUS

2K_PLUS

2MP

2MP

30fps

30fps

30fps_select

30fps_select

360

360

3d_rotation

3d_rotation

3g_mobiledata

3g_mobiledata

3k_plus

3k_plus

3mp

3mp

4g_mobiledata

4g_mobiledata

4g_plus_mobiledata

4g_plus_mobiledata

4k_plus

4k_plus

4mp

4mp

5k_plus

5k_plus

5mp

5mp

60fps

60fps

60fps_select

60fps_select

6_ft_apart

6_ft_apart

6k_plus

6k_plus

6 mp

754

6mp

7k_plus

7k_plus

7mp

7mp

8k_plus

8k_plus

8mp

8mp

9k_plus

9k_plus

9mp

9mp

abc

abc

ac_unit

ac_unit

access_02 90alarm

4

0003

access_alarms

access_alarms

access_time

access_time

access_time_filled

access_time_filled

accessibility

accessibility

accessibility_new

accessibility_new

accessible

accessible

доступный_форвард

доступный_форвард

account_balance

account_balance

account_balance_wallet

account_balance_wallet

account_box

account_box

account_circle

account_circle

account_tree

account_tree

ad_units

ad_units

adb

adb

добавить

добавить

add_a_photo

add_a_photo

add_alarm

add_alarm

add_alert

add_alert

add_box

add_box

add_business

add_business

add_call

add_call

add_card

add_card

add_chart

add_chart

add_circle

add_circle

add_circle_outline

add_circle_outline

add_comment

add_comment

add_home

add_home

add_home_work

add_home_work

add_ic_call

add_ic_call

add_link

add_link

add_location

add_location

add_location_alt

add_location_alt

add_moderator

add_moderator

add_photo_alternate

add_photo_alternate

add_reaction

add_reaction

add_road

add_road

add_shopping_cart

add_shopping_cart

add_task

add_task

add_to_drive

add_to_drive

add_to_home_screen

add_to_home_screen

add_to_photos

add_to_photos

add_to_queue

add_to_queue

addchart

addchart

adf_scanner

adf_scanner

adjust

настроить

admin_panel_settings

admin_panel_settings

adobe

adobe

ads_click

ads_click

agriculture

agriculture

air

air

airline_seat_flat

airline_seat_flat

airline_seat_flat_angled

airline_seat_flat_angled

авиакомпания_seat_individual_suite

авиакомпания_seat_individual_suite

авиакомпания_seat_legroom_extra

airline_seat_legroom_extra

airline_seat_legroom_normal

airline_seat_legroom_normal

airline_seat_legroom_reduced

airline_seat_legroom_reduced

airline_seat_recline_extra

airline_seat_recline_extra

airline_seat_recline_normal

airline_seat_recline_normal

airline_stops

airline_stops

airlines

airlines

airplane_ticket

airplane_ticket

airplanemode_active

airplanemode_active

airplanemode_inactive

airplanemode_inactive

airplanemode_off

airplanemode_off

airplanemode_on

airplanemode_on

трансляция

трансляция

airport_shuttle

airport_shuttle

alarm

alarm

alarm_add

alarm_add

alarm_off

alarm_off

alarm_on

alarm_on

album

album

align_horizontal_center

align_horizontal_center

align_horizontal_left

align_horizontal_left

align_horizontal_right

align_horizontal_right

align_vertical_bottom

align_vertical_bottom

align_vertical_center

align_vertical_center

align_vertical_top

align_vertical_top

all_inbox

all_inbox

all_inclusive

all_inclusive

все_вне

all_out

alt_route

alt_route

alternate_email

alternate_email

amp_stories

amp_stories

analytics

analytics

anchor

anchor

android

android

анимация

анимация

объявление

объявление

aod

aod

apartment

apartment

api

api

app_blocking

app_blocking

app_registration

app_registration

app_settings_alt

app_settings_alt

app_shortcut

app_shortcut

яблоко

яблоко

approval

approval

apps

apps

apps_outage

apps_outage

architecture

architecture

archive

archive

area_chart

area_chart

arrow_back

arrow_back

arrow_back_ios

arrow_back_ios

arrow_back_ios_new

arrow_back_ios_new

arrow_circle_down

arrow_circle_down

arrow_circle_left

arrow_circle_left

arrow_circle_right

arrow_circle_right

arrow_circle_up

arrow_circle_up

arrow_downward

arrow_downward

arrow_drop_down

arrow_drop_down

arrow_drop_down_circle

arrow_drop_down_circle

arrow_drop_up

arrow_drop_up

arrow_forward

arrow_forward

arrow_forward_ios

arrow_forward_ios

arrow_left

arrow_left

arrow_right

arrow_right

arrow_right_alt

arrow_right_alt

arrow_upward

arrow_upward

art_track

art_track

article

article

aspect_ratio

aspect_ratio

assessment

assessment

assignment

assignment

assignment_ind

assignment_ind

Назначение_позднее

Назначение_позднее

Назначение_возврат

Назначение_возврат

assignment_returned

assignment_returned

assignment_turned_in

assignment_turned_in

assistant

assistant

assistant_direction

assistant_direction

assistant_navigation

assistant_navigation

assistant_photo

assistant_photo

гарантированная_рабочая нагрузка

assured_workload

atm

atm

attach_email

attach_email

attach_file

attach_file

attach_money

attach_money

attachment

attachment

attractions

attractions

атрибуция

атрибуция

аудио_файл

audio_file

audiotrack

audiotrack

auto_awesome

auto_awesome

auto_awesome_mosaic

auto_awesome_mosaic

auto_awesome_motion

auto_awesome_motion

auto_delete

auto_delete

auto_fix_high

auto_fix_high

auto_fix_normal

auto_fix_normal

auto_fix_off

auto_fix_off

auto_graph

auto_graph

auto_mode

auto_mode

auto_stories

auto_stories

autofps_select

autofps_select

autorenew

autorenew

av_timer

av_timer

станция_переодевания

станция_переодевания

back_hand

back_hand

backpack

backpack

backspace

backspace

backup

backup

backup_table

backup_table

badge

badge

пекарня_столовая

пекарня_столовая

баланс

баланс

балкон

balcony

ballot

ballot

bar_chart

bar_chart

batch_prediction

batch_prediction

bathroom

bathroom

bathtub

bathtub

battery_0_bar

аккумулятор_0_бар

аккумулятор_1_бар

аккумулятор_1_бар

аккумулятор_2_бар

battery_2_bar

battery_3_bar

battery_3_bar

battery_4_bar

battery_4_bar

battery_5_bar

battery_5_bar

battery_6_bar

battery_6_bar

battery_alert

battery_alert

battery_charging_full

battery_charging_full

battery_full

battery_full

battery_saver

battery_saver

battery_std

battery_std

battery_unknown

battery_unknown

beach_access

beach_access

bed

bed

bedroom_baby

bedroom_baby

спальня_ребенок

спальня_ребенок

спальня_родитель

bedroom_parent

bedtime

bedtime

bedtime_off

bedtime_off

beenhere

beenhere

bento

bento

bike_scooter

bike_scooter

biotech

biotech

блендер

блендер

жалюзи

жалюзи

жалюзи_закрытые

blinds_closed

block

block

block_flipped

block_flipped

bloodtype

bloodtype

bluetooth

bluetooth

bluetooth_audio

bluetooth_audio

bluetooth_connected

bluetooth_connected

bluetooth_disabled

bluetooth_disabled

bluetooth_drive

bluetooth_drive

bluetooth_searching

bluetooth_searching

blur_circular

blur_circular

blur_linear

blur_linear

blur_off

blur_off

blur_on

blur_on

болт

болт

книжка

книжка

book_online

book_online

bookmark

bookmark

bookmark_add

bookmark_add

bookmark_added

bookmark_added

bookmark_border

bookmark_border

bookmark_outline

bookmark_outline

bookmark_remove

bookmark_remove

закладки

bookmarks

border_all

border_all

border_bottom

border_bottom

border_clear

border_clear

border_color

border_color

border_horizontal

border_horizontal

border_inner

border_inner

border_left

border_left

border_outer

border_outer

border_right

border_right

border_style

border_style

border_top

border_top

border_vertical

border_vertical

boy

boy

branding_watermark

брендинг_водяной знак

завтрак_обед

завтрак_обед

brightness_1

brightness_1

brightness_2

brightness_2

brightness_3

brightness_3

brightness_4

brightness_4

brightness_5

brightness_5

brightness_6

brightness_6

яркость_7

яркость_7

яркость_авто

brightness_auto

brightness_high

brightness_high

brightness_low

brightness_low

brightness_medium

brightness_medium

broadcast_on_home

broadcast_on_home

broadcast_on_personal

broadcast_on_personal

broken_image

сломанное_изображение

browse_gallery

browse_gallery

browser_not_supported

browser_not_supported

browser_updated

browser_updated

brunch_dining

brunch_dining

brush

brush

bubble_chart

bubble_chart

bug_report

bug_report

сборка

сборка

build_circle

build_circle

bungalow

bungalow

burst_mode

burst_mode

bus_alert

bus_alert

business

business

business_center

business_center

cabin

кабина

кабель

кабель

скрытый

cached

cake

cake

calculate

calculate

calendar_month

calendar_month

calendar_today

calendar_today

calendar_view_day

calendar_view_day

calendar_view_month

calendar_view_month

calendar_view_week

calendar_view_week

call

call

call_end

call_end

call_made

call_made

call_merge

call_merge

call_missed

call_missed

call_missed_outgoing

call_missed_outgoing

call_received

call_received

call_split

call_split

call_to_action

call_to_action

camera

camera

camera_alt

camera_alt

camera_enhance

camera_enhance

camera_front

camera_front

camera_indoor

camera_indoor

camera_outdoor

camera_outdoor

camera_rear

camera_rear

camera_roll

camera_roll

cameraswitch

cameraswitch

campaign

campaign

cancel

cancel

cancel_presentation

cancel_presentation

cancel_schedule_send

cancel_schedule_send

Candlestick_Chart

Candlestick_Chart

car_crash

car_crash

car_rental

car_rental

car_repair

car_repair

card_giftcard

card_giftcard

card_membership

card_membership

card_travel

card_travel

carpenter

плотник

ящики

ящики

казино

casino

cast

cast

cast_connected

cast_connected

cast_for_education

cast_for_education

castle

castle

catching_pokemon

catching_pokemon

category

категория

праздник

праздник

cell_tower

cell_tower

cell_wifi

cell_wifi

center_focus_strong

center_focus_strong

center_focus_weak

center_focus_weak

chair

chair

chair_alt

chair_alt

chalet

шале

change_circle

change_circle

change_history

change_history

charging_station

charging_station

chat

chat

chat_bubble

chat_bubble

chat_bubble_outline

chat_bubble_outline

check

check

check_box

check_box

check_box_outline_blank

check_box_outline_blank

check_circle

check_circle

check_circle_outline

check_circle_outline

checklist

checklist

checklist_rtl

checklist_rtl

checkroom

checkroom

chevron_left

chevron_left

chevron_right

chevron_right

уход за детьми

child_care

child_friendly

child_friendly

chrome_reader_mode

chrome_reader_mode

church

church

circle

circle

circle_notifications

circle_notifications

class

класс

чистые_руки

чистые_руки

услуги по уборке

cleaning_services

clear

clear

clear_all

clear_all

close

close

close_fullscreen

close_fullscreen

closed_caption

closed_caption

closed_caption_disabled

closed_caption_disabled

closed_caption_off

closed_caption_off

cloud

cloud

cloud_circle

cloud_circle

cloud_done

cloud_done

cloud_download

cloud_download

cloud_off

cloud_off

cloud_queue

cloud_queue

cloud_sync

cloud_sync

cloud_upload

cloud_upload

cloudy_snowing

cloudy_snowing

co2

co2

co_present

co_present

code

code

code_off

code_off

coffee

coffee

coffee_maker

coffee_maker

коллекции

коллекции

collections_bookmark

collections_bookmark

color_lens

color_lens

colorize

colorize

comment

comment

comment_bank

comment_bank

comments_disabled

comments_disabled

commit

совершить

коммутировать

коммутировать

сравнить

compare

compare_arrows

compare_arrows

compass_calibration

compass_calibration

compost

compost

compress

compress

computer

computer

confirmation_num

номер подтверждения

номер подтверждения

номер подтверждения

connect_without_contact

connect_without_contact

connected_tv

connected_tv

connecting_airports

connecting_airports

construction

construction

contact_mail

contact_mail

contact_page

contact_page

contact_phone

contact_phone

contact_support

contact_support

contactless

contactless

contacts

contacts

content_copy

content_copy

content_cut

content_cut

content_paste

content_paste

content_paste_go

content_paste_go

content_paste_off

content_paste_off

content_paste_search

content_paste_search

contrast

contrast

control_camera

control_camera

control_point

control_point

control_point_duplicate

control_point_duplicate

cookie

cookie

копия_все

копия_все

copyright

copyright

coronavirus

coronavirus

corporate_fare

corporate_fare

cottage

cottage

countertops

countertops

create

create

create_new_folder

create_new_folder

кредитная_карта

кредитная_карта

credit_card_off

credit_card_off

credit_score

credit_score

crib

crib

crisis_alert

crisis_alert

crop

crop

crop_16_9

crop_16_9

урожая_3_2

урожая_3_2

урожая_5_4

урожая_5_4

урожая_7_5

crop_7_5

crop_din

crop_din

crop_free

crop_free

crop_landscape

crop_landscape

crop_original

crop_original

crop_portrait

crop_portrait

crop_rotate

урожая_поворота

урожая_квадрата

урожая_квадрата

жестокости_бесплатно

cruelty_free

css

css

currency_bitcoin

currency_bitcoin

currency_exchange

currency_exchange

currency_franc

currency_franc

currency_lira

currency_lira

currency_pound

валюта_фунт

валюта_рубль

валюта_рубль

currency_rupee

currency_rupee

currency_yen

currency_yen

currency_yuan

currency_yuan

curtains

curtains

curtains_closed

curtains_closed

cyclone

cyclone

опасный

опасный

темный_режим

темный_режим

dashboard

dashboard

dashboard_customize

dashboard_customize

data_array

data_array

data_exploration

data_exploration

data_object

data_object

data_saver_off

data_saver_off

data_saver_on

data_saver_on

data_thresholding

data_thresholding

data_usage

data_usage

dataset

dataset

dataset_linked

dataset_linked

date_range

date_range

deblur

deblur

deck

дека

удаление дымки

удаление дымки

удалить

удалить

delete_forever

delete_forever

delete_outline

delete_outline

delete_sweep

delete_sweep

delivery_dining

delivery_dining

density_large

density_large

density_medium

density_medium

плотность_маленькая

плотность_маленькая

отправление_доска

departure_board

description

description

deselect

deselect

design_services

design_services

desk

desk

desktop_access_disabled

desktop_access_disabled

desktop_mac

рабочий стол_mac

рабочий стол_windows

рабочий стол_windows

details

details

developer_board

developer_board

developer_board_off

developer_board_off

developer_mode

developer_mode

device_hub

device_hub

device_thermostat

device_thermostat

устройство_неизвестно

устройство_неизвестно

устройства

devices

devices_fold

devices_fold

devices_other

devices_other

dialer_sip

dialer_sip

dialpad

dialpad

diamond

diamond

difference

разница

столовая

столовая

ужин_обед

ужин_обед

directions

directions

directions_bike

directions_bike

directions_boat

directions_boat

directions_boat_filled

directions_boat_filled

directions_bus

directions_bus

directions_bus_filled

directions_bus_filled

направления_автомобиль

направления_автомобиль

directions_car_filled

directions_car_filled

directions_ferry

directions_ferry

directions_off

directions_off

directions_railway

directions_railway

directions_railway_filled

directions_railway_filled

directions_run

directions_run

направления_метро

directions_subway

directions_subway_filled

directions_subway_filled

directions_train

directions_train

directions_transit

directions_transit

directions_transit_filled

directions_transit_filled

directions_walk

directions_walk

dirty_lens

грязный_объектив

disabled_by_default

disabled_by_default

disabled_visible

disabled_visible

disc_full

disc_full

discord

discord

discount

discount

display_settings

display_settings

dnd_forwardslash

dnd_forwardslash

dns

dns

do_disturb

do_disturb

do_disturb_alt

do_disturb_alt

do_disturb_off

do_disturb_off

do_disturb_on

do_disturb_on

do_not_disturb

do_not_disturb

do_not_disturb_alt

do_not_disturb_alt

do_not_disturb_off

do_not_disturb_off

do_not_disturb_on

do_not_disturb_on

do_not_disturb_on_total_silence

do_not_disturb_on_total_silence

do_not_step

do_not_step

do_not_touch

do_not_touch

dock

dock

document_scanner

document_scanner

домен

домен

domain_add

domain_add

domain_disabled

domain_disabled

domain_verification

domain_verification

done

done

done_all

done_all

done_outline

done_outline

donut_large

пончик_большой

пончик_маленький

пончик_маленький

door_back

door_back

door_front

door_front

door_sliding

door_sliding

doorbell

doorbell

double_arrow

double_arrow

downhill_skiing

downhill_skiing

загрузить

загрузить

загрузить_готово

загрузить_готово

download_for_offline

download_for_offline

downloading

downloading

drafts

drafts

drag_handle

drag_handle

drag_indicator

drag_indicator

draw

draw

drive_eta

drive_eta

drive_file_move

drive_file_move

drive_file_move_outline

drive_file_move_outline

drive_file_move_rtl

drive_file_move_rtl

drive_file_rename_outline

drive_file_rename_outline

drive_folder_upload

drive_folder_upload

dry

dry

dry_cleaning

dry_cleaning

дуэт

дуэт

dvr

dvr

dynamic_feed

dynamic_feed

dynamic_form

dynamic_form

e_mobiledata

e_mobiledata

earbuds

earbuds

earbuds_battery

earbuds_battery

восток

восток

эко

эко

edgeensor_high

edgesensor_high

edgesensor_low

edgesensor_low

edit

edit

edit_attributes

edit_attributes

edit_calendar

edit_calendar

edit_location

edit_location

edit_location_alt

edit_location_alt

edit_note

edit_note

edit_notifications

edit_notifications

edit_off

edit_off

edit_road

edit_road

egg

egg

egg_alt

egg_alt

eject

eject

пожилые

пожилые

пожилые_женщины

пожилые_женщины

электрические_велосипеды

electric_bike

electric_bolt

electric_bolt

electric_car

electric_car

electric_meter

electric_meter

electric_moped

electric_moped

electric_rickshaw

electric_rickshaw

electric_scooter

электрический_самокат

электрические_услуги

electrical_services

elevator

elevator

email

email

emergency

emergency

emergency_recording

emergency_recording

emergency_share

emergency_share

emoji_emotions

emoji_emotions

emoji_events

emoji_events

emoji_flags

emoji_flags

emoji_food_beverage

emoji_food_beverage

emoji_nature

emoji_nature

emoji_objects

emoji_objects

emoji_people

emoji_people

emoji_symbols

emoji_symbols

emoji_transportation

emoji_transportation

energy_savings_leaf

energy_savings_leaf

engineering

engineering

enhance_photo_translate

enhance_photo_translate

enhanced_encryption

enhanced_encryption

equalizer

equalizer

error

error

error_outline

error_outline

эскалатор

эскалатор

escalator_warning

escalator_warning

euro

euro

euro_symbol

euro_symbol

ev_station

ev_station

event

event

event_available

event_available

event_busy

event_busy

event_note

event_note

event_repeat

event_repeat

event_seat

event_seat

exit_to_app

exit_to_app

expand

expand

expand_circle_down

expand_circle_down

expand_less

expand_less

expand_more

expand_more

явный

явный

explore

explore

explore_off

explore_off

exposure

exposure

exposure_minus_1

exposure_minus_1

exposure_minus_2

exposure_minus_2

exposure_neg_1

exposure_neg_1

экспозиция_нег_2

экспозиция_нег_2

экспозиция_плюс_1

exposure_plus_1

exposure_plus_2

exposure_plus_2

exposure_zero

exposure_zero

extension

extension

extension_off

extension_off

face

face

face_retouching_natural

face_retouching_natural

face_retouching_off

face_retouching_off

facebook

facebook

fact_check

fact_check

factory

factory

family_restroom

family_restroom

fast_forward

fast_forward

fast_rewind

fast_rewind

фастфуд

фастфуд

любимый

любимый

favorite_border

favorite_border

favorite_outline

favorite_outline

fax

fax

featured_play_list

featured_play_list

featured_video

featured_video

feed

feed

обратная связь

обратная связь

женский

женский

fence

fence

festival

festival

fiber_dvr

fiber_dvr

fiber_manual_record

fiber_manual_record

fiber_new

fiber_new

fiber_pin

fiber_pin

fiber_smart_record

fiber_smart_record

file_copy

file_copy

file_download

file_download

file_download_done

file_download_done

file_download_off

file_download_off

file_open

file_open

file_present

file_present

file_upload

file_upload

фильтр

фильтр

фильтр_1

filter_1

filter_2

filter_2

filter_3

filter_3

filter_4

filter_4

filter_5

filter_5

filter_6

filter_6

filter_7

filter_7

filter_8

filter_8

filter_9

filter_9

filter_9_plus

filter_9_plus

filter_alt

filter_alt

filter_alt_off

filter_alt_off

filter_b_and_w

filter_b_and_w

filter_center_focus

filter_center_focus

filter_drama

filter_drama

filter_frames

filter_frames

filter_hdr

filter_hdr

filter_list

filter_list

filter_list_alt

filter_list_alt

filter_list_off

filter_list_off

filter_none

filter_none

filter_tilt_shift

filter_tilt_shift

filter_vintage

filter_vintage

найти_в_странице

найти_в_странице

find_replace

find_replace

fingerprint

fingerprint

fire_extinguisher

fire_extinguisher

fire_hydrant

fire_hydrant

fire_hydrant_alt

fire_hydrant_alt

fire_truck

fire_truck

камин

камин

first_page

first_page

fit_screen

fit_screen

fitbit

fitbit

fitness_center

fitness_center

flag

flag

flag_circle

flag_circle

flaky

flaky

вспышка

вспышка

flash_auto

flash_auto

flash_off

flash_off

flash_on

flash_on

flashlight_off

flashlight_off

flashlight_on

flashlight_on

flatware

flatware

flight

flight

flight_class

полет_класс

полет_земля

полет_земля

полет_взлет

flight_takeoff

flip

flip

flip_camera_android

flip_camera_android

flip_camera_ios

flip_camera_ios

flip_to_back

flip_to_back

flip_to_front

flip_to_front

flood

заливной

флуоресцентный

флуоресцентный

flutter_dash

flutter_dash

fmd_bad

fmd_bad

fmd_good

fmd_good

foggy

foggy

folder

folder

folder_copy

folder_copy

folder_delete

папка_удалить

папка_выкл

папка_выкл

папка_открыть

folder_open

folder_shared

folder_shared

folder_special

folder_special

folder_zip

folder_zip

follow_the_signs

follow_the_signs

font_download

font_download

font_download_off

font_download_off

food_bank

food_bank

forest

forest

fork_left

fork_left

fork_right

fork_right

format_align_center

format_align_center

format_align_justify

format_align_justify

format_align_left

format_align_left

format_align_right

format_align_right

format_bold

format_bold

format_clear

format_clear

format_color_fill

format_color_fill

format_color_reset

format_color_reset

format_color_text

format_color_text

format_indent_decrease

format_indent_decrease

format_indent_increase

format_indent_increase

format_italic

format_italic

format_line_spacing

format_line_spacing

format_list_bulleted

format_list_bulleted

format_list_numbered

format_list_numbered

format_list_numbered_rtl

format_list_numbered_rtl

format_overline

format_overline

format_paint

format_paint

format_quote

format_quote

format_shapes

format_shapes

format_size

format_size

format_strikethrough

format_strikethrough

format_textdirection_l_to_r

format_textdirection_l_to_r

format_textdirection_r_to_l

format_textdirection_r_to_l

format_underline

format_underline

format_underlined

format_underlined

fort

fort

forum

forum

forward

forward

forward_10

forward_10

forward_30

forward_30

forward_5

forward_5

forward_to_inbox

forward_to_inbox

foundation

foundation

free_breakfast

free_breakfast

free_cancellation

free_cancellation

front_hand

front_hand

fullscreen

fullscreen

fullscreen_exit

fullscreen_exit

функции

functions

g_mobiledata

g_mobiledata

g_translate

g_translate

gamepad

gamepad

games

games

garage

garage

gas_meter

газовый_счетчик

молоток

молоток

генерация_токенов

генерация_токенов

gesture

gesture

get_app

get_app

gif

gif

gif_box

gif_box

girl

girl

gite

gite

коза

коза

поле для гольфа

поле для гольфа

gpp_bad

gpp_bad

023754

gpp_good

gpp_maybe

gpp_maybe

gps_fixed

gps_fixed

gps_not_fixed

gps_not_fixed

gps_off

gps_off

grade

grade

gradient

градиент

градация

градация

зерно

зерно

graphic_eq

graphic_eq

grass

grass

grid_3x3

grid_3x3

grid_4x4

grid_4x4

grid_goldenratio

grid_goldenratio

grid_off

grid_off

grid_on

grid_on

grid_view

grid_view

группа

group

group_add

group_add

group_off

group_off

group_remove

group_remove

group_work

group_work

groups

groups

h_mobiledata

h_mobiledata

h_plus_mobiledata

h_plus_mobiledata

град

град

handshake

handshake

handyman

handyman

hardware

hardware

hdr_auto

hdr_auto

hdr_auto_select

hdr_auto_select

hdr_enhanced_select

hdr_enhanced_select

hdr_off

hdr_off

hdr_off_select

hdr_off_select

hdr_on

hdr_on

hdr_on_select

hdr_on_select

hdr_plus

hdr_plus

hdr_strong

hdr_strong

hdr_weak

hdr_weak

headphones

headphones

наушники_батарея

наушники_батарея

наушники

наушники

headset_mic

headset_mic

headset_off

headset_off

healing

healing

health_and_safety

health_and_safety

hearing

hearing

hearing_disabled

hearing_disabled

разбитое сердце

разбитое сердце

тепловой_насос

тепловой_насос

height

height

help

help

help_center

help_center

help_outline

help_outline

hevc

hevc

hexagon

hexagon

hide_image

hide_image

hide_source

hide_source

high_quality

high_quality

highlight

highlight

highlight_alt

highlight_alt

highlight_off

highlight_off

highlight_remove

highlight_remove

hiking

hiking

history

history

history_edu

history_edu

history_toggle_off

history_toggle_off

hive

hive

hls

hls

hls_off

hls_off

holiday_village

holiday_village

home

home

home_filled

home_filled

home_max

home_max

home_mini

home_mini

home_repair_service

home_repair_service

home_work

home_work

horizontal_distribute

horizontal_distribute

horizontal_rule

horizontal_rule

horizontal_split

horizontal_split

hot_tub

hot_tub

отель

отель

отель_класс

hotel_class

hourglass_bottom

hourglass_bottom

hourglass_disabled

hourglass_disabled

hourglass_empty

hourglass_empty

hourglass_full

hourglass_full

hourglass_top

hourglass_top

house

дом

дом_сайдинг

дом_сайдинг

houseboat

houseboat

how_to_reg

how_to_reg

how_to_vote

how_to_vote

html

html

http

http

https

https

ступица

ступица

ОВКВ

ОВКВ

катание на коньках

катание на коньках

icecream

icecream

image

image

image_aspect_ratio

image_aspect_ratio

image_not_supported

image_not_supported

image_search

image_search

imagesearch_roller

imagesearch_roller

import_contacts

import_contacts

import_export

import_export

important_devices

important_devices

inbox

inbox

incomplete_circle

incomplete_circle

indeterminate_check_box

indeterminate_check_box

info

info

info_outline

info_outline

ввод

ввод

insert_chart

insert_chart

insert_chart_outlined

insert_chart_outlined

insert_comment

insert_comment

insert_drive_file

insert_drive_file

insert_emoticon

insert_emoticon

insert_invitation

insert_invitation

вставка_ссылка

вставка_ссылка

insert_page_break

insert_page_break

insert_photo

insert_photo

insights

insights

install_desktop

install_desktop

install_mobile

install_mobile

integration_instructions

integration_instructions

проценты

проценты

interpreter_mode

interpreter_mode

inventory

inventory

inventory_2

inventory_2

invert_colors

invert_colors

invert_colors_off

invert_colors_off

invert_colors_on

invert_colors_on

ios_share

ios_share

железо

iron

iso

iso

javascript

javascript

join_full

join_full

join_inner

join_inner

join_left

join_left

join_right

join_right

каякинг

каякинг

кебаб_обед

кебаб_обед

key

key

key_off

key_off

keyboard

keyboard

keyboard_alt

keyboard_alt

keyboard_arrow_down

keyboard_arrow_down

keyboard_arrow_left

keyboard_arrow_left

keyboard_arrow_right

клавиатура_стрелка_вправо

клавиатура_стрелка_вверх

keyboard_arrow_up

keyboard_backspace

keyboard_backspace

keyboard_capslock

keyboard_capslock

keyboard_command

keyboard_command

keyboard_command_key

keyboard_command_key

keyboard_control

keyboard_control

keyboard_control_key

клавиатура_control_key

keyboard_double_arrow_down

keyboard_double_arrow_down

keyboard_double_arrow_left

keyboard_double_arrow_left

keyboard_double_arrow_right

keyboard_double_arrow_right

keyboard_double_arrow_up

keyboard_double_arrow_up

keyboard_hide

keyboard_hide

keyboard_option

keyboard_option

keyboard_option_key

keyboard_option_key

keyboard_return

keyboard_return

keyboard_tab

keyboard_tab

keyboard_voice

keyboard_voice

king_bed

king_bed

kitchen

kitchen

кайтсерфинг

кайтсерфинг

этикетка

label

label_important

label_important

label_important_outline

label_important_outline

label_off

label_off

label_outline

label_outline

lan

lan

landscape

landscape

оползень

оползень

язык

language

laptop

laptop

laptop_chromebook

laptop_chromebook

laptop_mac

laptop_mac

laptop_windows

laptop_windows

last_page

last_page

launch

запуск

слоев

слоев

Layers_Clear

Layers_clear

leaderboard

leaderboard

leak_add

leak_add

leak_remove

leak_remove

leave_bags_at_home

leave_bags_at_home

legend_toggle

legend_toggle

lens

lens

Lens_blur

Lens_blur

library_add

library_add

library_add_check

library_add_check

library_books

library_books

library_music

library_music

light

light

light_mode

light_mode

lightbulb

lightbulb

лампочка_круг

лампочка_круг

лампочка_контур

lightbulb_outline

line_axis

line_axis

line_style

line_style

line_weight

line_weight

linear_scale

linear_scale

link

link

link_off

link_off

linked_camera

linked_camera

ликер

ликер

list

list

list_alt

list_alt

live_help

live_help

live_tv

live_tv

living

living

local_activity

local_activity

local_airport

local_airport

local_atm

local_atm

local_attraction

local_attraction

local_bar

local_bar

local_cafe

local_cafe

local_car_wash

local_car_wash

local_convenience_store

local_convenience_store

local_dining

local_dining

local_drink

local_drink

local_fire_department

local_fire_department

local_florist

local_florist

local_gas_station

local_gas_station

local_grocery_store

local_grocery_store

local_hospital

local_hospital

local_hotel

local_hotel

local_laundry_service

local_laundry_service

локальная_библиотека

local_library

local_mall

local_mall

local_movies

local_movies

local_offer

local_offer

local_parking

local_parking

local_pharmacy

local_pharmacy

local_phone

local_phone

local_pizza

local_pizza

local_play

local_play

local_police

local_police

local_post_office

local_post_office

local_print_shop

local_print_shop

local_printshop

local_printshop

local_restaurant

local_restaurant

local_see

local_see

local_shipping

local_shipping

local_taxi

local_taxi

location_city

location_city

location_disabled

location_disabled

location_history

location_history

location_off

location_off

location_on

location_on

location_pin

location_pin

location_searching

location_searching

lock

lock

lock_clock

lock_clock

lock_open

lock_open

lock_outline

lock_outline

lock_person

lock_person

lock_reset

lock_reset

логин

логин

logo_dev

logo_dev

logout

logout

looks

looks

looks_3

looks_3

looks_4

looks_4

looks_5

looks_5

look_6

look_6

look_one

look_one

look_two

look_two

loop

loop

loupe

loupe

low_priority

low_priority

loyalty

loyalty

lte_mobiledata

lte_mobiledata

lte_plus_mobiledata

lte_plus_mobiledata

багаж

багаж

обед_обед

обед_обед

lyrics

lyrics

mail

mail

mail_lock

mail_lock

mail_outline

mail_outline

male

male

man

man

manage_accounts

manage_accounts

manage_history

manage_history

manage_search

manage_search

map

map

maps_home_work

maps_home_work

maps_ugc

maps_ugc

margin

margin

mark_as_unread

mark_as_unread

mark_chat_read

mark_chat_read

mark_chat_unread

mark_chat_unread

mark_email_read

mark_email_read

mark_email_unread

mark_email_unread

mark_unread_chat_alt

mark_unread_chat_alt

markunread

markunread

markunread_mailbox

markunread_mailbox

masks

masks

maximize

развернуть

media_bluetooth_off

media_bluetooth_off

media_bluetooth_on

media_bluetooth_on

mediation

mediation

medical_information

medical_information

medical_services

medical_services

medication

medication

medication_liquid

medication_liquid

комната для собраний

комната для собраний

memory

memory

menu

menu

menu_book

menu_book

menu_open

menu_open

merge

merge

merge_type

merge_type

сообщение

сообщение

мессенджер

мессенджер

messenger_outline

messenger_outline

mic

mic

mic_external_off

mic_external_off

mic_external_on

mic_external_on

mic_none

mic_none

mic_off

mic_off

microwave

microwave

Military_tech

Military_tech

свернуть

свернуть

minor_crash

minor_crash

miscellaneous_services

miscellaneous_services

missed_video_call

missed_video_call

mms

mms

mobile_friendly

mobile_friendly

mobile_off

mobile_off

mobile_screen_share

mobile_screen_share

mobiledata_off

mobiledata_off

mode

mode

mode_comment

mode_comment

mode_edit

mode_edit

mode_edit_outline

mode_edit_outline

mode_fan_off

mode_fan_off

mode_night

mode_night

mode_of_travel

mode_of_travel

mode_standby

mode_standby

model_training

model_training

monetization_on

monetization_on

money

money

money_off

money_off

money_off_csred

money_off_csred

monitor

монитор

монитор_сердце

монитор_сердце

монитор_вес

monitor_weight

monochrome_photos

monochrome_photos

mood

mood

mood_bad

mood_bad

moped

moped

more

more

more_horiz

more_horiz

more_time

more_time

more_vert

more_vert

mosque

mosque

motion_photos_auto

motion_photos_auto

motion_photos_off

motion_photos_off

motion_photos_on

motion_photos_on

motion_photos_pause

motion_photos_pause

motion_photos_paused

motion_photos_paused

мотоцикл

мотоцикл

mouse

mouse

move_down

move_down

move_to_inbox

move_to_inbox

move_up

move_up

movie

movie

movie_creation

movie_creation

movie_filter

movie_filter

перемещение

перемещение

multiline_chart

multiline_chart

multiple_stop

multiple_stop

multitrack_audio

multitrack_audio

museum

museum

music_note

music_note

music_off

music_off

music_video

music_video

my_library_add

my_library_add

my_library_books

my_library_books

my_library_music

my_library_music

my_location

my_location

nat

nat

nature

nature

nature_people

nature_people

navigate_before

navigation_before

navigation_next

navigation_next

navigation

navigation

near_me

near_me

near_me_disabled

near_me_disabled

nearby_error

nearby_error

nearby_off

nearby_off

nest_cam_wired_stand

nest_cam_wired_stand

network_cell

network_cell

network_check

network_check

network_locked

network_locked

network_ping

network_ping

network_wifi

network_wifi

network_wifi_1_bar

network_wifi_1_bar

network_wifi_2_bar

network_wifi_2_bar

network_wifi_3_bar

network_wifi_3_bar

new_label

new_label

new_releases

new_releases

newspaper

newspaper

next_plan

next_plan

next_week

next_week

nfc

nfc

night_shelter

night_shelter

ночная жизнь

ночная жизнь

ночник

ночник

nightlight_round

nightlight_round

nights_stay

nights_stay

no_accounts

no_accounts

no_adult_content

no_adult_content

no_backpack

no_backpack

no_cell

no_cell

no_crash

no_crash

no_drinks

no_drinks

no_encryption

no_encryption

no_encryption_gmailerrorred

no_encryption_gmailerrorred

no_flash

no_flash

no_food

no_food

no_luggage

no_luggage

no_meals

no_meals

no_meals_ouline

no_meals_ouline

no_meeting_room

no_meeting_room

no_photography

no_photography

no_sim

no_sim

no_stroller

no_stroller

no_transfer

no_transfer

noise_aware

noise_aware

noise_control_off

Noise_control_off

nordic_walking

nordic_walking

north

north

north_east

north_east

north_west

north_west

not_accessible

not_accessible

not_interested

not_interested

not_listed_location

not_listed_location

not_started

not_started

примечание

примечание

note_add

note_add

note_alt

note_alt

notes

notes

notification_add

notification_add

notification_important

notification_important

notifications

notifications

уведомления_активные

уведомления_активные

уведомления_нет

notifications_none

notifications_off

notifications_off

notifications_on

notifications_on

notifications_paused

notifications_paused

now_wallpaper

now_wallpaper

now_widgets

now_widgets

numbers

номера

offline_bolt

offline_bolt

offline_pin

offline_pin

offline_share

offline_share

oil_barrel

oil_barrel

on_device_training

on_device_training

ondemand_video

ondemand_video

online_prediction

online_prediction

непрозрачность

непрозрачность

open_in_browser

open_in_browser

open_in_full

open_in_full

open_in_new

open_in_new

open_in_new_off

open_in_new_off

open_with

open_with

other_houses

other_houses

outbond

исходящий

исходящий

исходящий

outbox

outbox

outdoor_grill

outdoor_grill

outgoing_mail

outgoing_mail

outlet

outlet

outlined_flag

outlined_flag

output

output

заполнение

заполнение

страницы

страницы

просмотр страницы

pageview

paid

paid

palette

palette

pan_tool

pan_tool

pan_tool_alt

pan_tool_alt

panorama

panorama

panorama_fish_eye

панорама_рыбий глаз

панорама_рыбий глаз

панорама_рыбий глаз

панорама_горизонтальный

panorama_horizontal

panorama_horizontal_select

panorama_horizontal_select

panorama_photosphere

panorama_photosphere

panorama_photosphere_select

panorama_photosphere_select

panorama_vertical

panorama_vertical

panorama_vertical_select

panorama_vertical_select

panorama_wide_angle

panorama_wide_angle

panorama_wide_angle_select

panorama_wide_angle_select

paragliding

paragliding

park

park

party_mode

party_mode

password

password

pattern

узор

пауза

пауза

пауза_круг

pause_circle

pause_circle_filled

pause_circle_filled

pause_circle_outline

pause_circle_outline

pause_presentation

pause_presentation

payment

payment

payments

payments

paypal

PayPal

педальный_велосипед

педальный_велосипед

pending

pending

pending_actions

pending_actions

pentagon

pentagon

people

people

people_alt

people_alt

people_outline

people_outline

процентов

процентов

perm_camera_mic

perm_camera_mic

perm_contact_cal

perm_contact_cal

perm_contact_calendar

perm_contact_calendar

perm_data_setting

perm_data_setting

perm_device_info

perm_device_info

perm_device_information

perm_device_information

perm_identity

perm_identity

perm_media

perm_media

perm_phone_msg

perm_phone_msg

perm_scan_wifi

perm_scan_wifi

person

person

person_add

person_add

person_add_alt

person_add_alt

person_add_alt_1

person_add_alt_1

person_add_disabled

person_add_disabled

person_off

person_off

person_outline

person_outline

person_pin

person_pin

person_pin_circle

person_pin_circle

person_remove

person_remove

person_remove_alt_1

person_remove_alt_1

person_search

person_search

personal_injury

personal_injury

personal_video

personal_video

pest_control

pest_control

pest_control_rodent

pest_control_rodent

pets

pets

phishing

phishing

phone

телефон

phone_android

phone_android

phone_bluetooth_speaker

phone_bluetooth_speaker

phone_callback

phone_callback

phone_disabled

phone_disabled

phone_enabled

phone_enabled

phone_forwarded

phone_forwarded

phone_in_talk

phone_in_talk

phone_iphone

phone_iphone

phone_locked

phone_locked

phone_missed

phone_missed

phone_paused

phone_paused

phonelink

phonelink

phonelink_erase

phonelink_erase

phonelink_lock

phonelink_lock

phonelink_off

phonelink_off

phonelink_ring

phonelink_ring

phonelink_setup

phonelink_setup

photo

photo

photo_album

photo_album

photo_camera

photo_camera

photo_camera_back

photo_camera_back

photo_camera_front

photo_camera_front

photo_filter

фото_фильтр

фото_библиотека

photo_library

photo_size_select_actual

photo_size_select_actual

photo_size_select_large

photo_size_select_large

photo_size_select_small

photo_size_select_small

php

php

piano

piano

piano_off

piano_off

picture_as_pdf

picture_as_pdf

picture_in_picture

picture_in_picture

picture_in_picture_alt

picture_in_picture_alt

pie_chart

pie_chart

pie_chart_outline

pie_chart_outline

pie_chart_outlined

pie_chart_outlined

pin

pin

pin_drop

pin_drop

pin_end

pin_end

pin_invoke

pin_invoke

pinch

pinch

pivot_table_chart

pivot_table_chart

pix

pix

place

place

плагиат

плагиат

play_arrow

play_arrow

play_circle

play_circle

play_circle_fill

play_circle_fill

play_circle_filled

play_circle_filled

play_circle_outline

play_circle_outline

play_disabled

play_disabled

play_for_work

play_for_work

play_lesson

play_lesson

playlist_add

playlist_add

playlist_add_check

playlist_add_check

playlist_add_check_circle

playlist_add_check_circle

playlist_add_circle

playlist_add_circle

playlist_play

playlist_play

playlist_remove

playlist_remove

plumbing

сантехника

plus_one

plus_one

podcasts

podcasts

point_of_sale

point_of_sale

policy

policy

poll

poll

polyline

polyline

polymer

полимер

бассейн

бассейн

Portable_wifi_off

Portable_wifi_off

portrait

portrait

post_add

post_add

power

power

power_input

power_input

power_off

power_off

power_settings_new

power_settings_new

точность_производство

точность_производство

беременная_женщина

беременная_женщина

present_to_all

present_to_all

preview

preview

price_change

price_change

price_check

price_check

print

print

print_disabled

print_disabled

Priority_High

Priority_High

Privacy_tip

Privacy_tip

private_connectivity

private_connectivity

production_quantity_limits

production_quantity_limits

propane

propane

propane_tank

propane_tank

psychology

psychology

psychology_alt

psychology_alt

общедоступный

общедоступный

общедоступный_выкл.

public_off

publish

publish

published_with_changes

published_with_changes

punch_clock

punch_clock

push_pin

push_pin

qr_code

qr_code

qr_code_2

qr_code_2

qr_code_scanner

qr_code_scanner

query_builder

query_builder

query_stats

query_stats

question_answer

question_answer

question_mark

question_mark

queue

queue

queue_music

queue_music

queue_play_next

queue_play_next

quick_contacts_dialer

quick_contacts_dialer

quick_contacts_mail

quick_contacts_mail

quickreply

quickreply

quiz

quiz

quora

quora

r_mobiledata

r_mobiledata

radar

radar

радио

радио

радио_кнопка_проверено

радио_кнопка_проверено

radio_button_off

radio_button_off

radio_button_on

radio_button_on

radio_button_unchecked

radio_button_unchecked

railway_alert

railway_alert

ramen_dining

ramen_dining

ramp_left

ramp_left

Ramp_right

Ramp_right

rate_review

rate_review

raw_off

raw_off

raw_on

raw_on

read_more

read_more

real_estate_agent

real_estate_agent

receipt

receipt

receipt_long

квитанция_длинная

недавние_актеры

недавние_актеры

рекомендовать

recommend

record_voice_over

record_voice_over

rectangle

rectangle

recycling

recycling

reddit

reddit

redeem

redeem

redo

повторить

уменьшить_емкость

уменьшить_емкость

обновить

обновить

remember_me

remember_me

remove

remove

remove_circle

remove_circle

remove_circle_outline

remove_circle_outline

remove_done

remove_done

remove_from_queue

remove_from_queue

remove_moderator

remove_moderator

remove_red_eye

remove_red_eye

remove_road

remove_road

remove_shopping_cart

remove_shopping_cart

reorder

reorder

repartition

repartition

repeat

repeat

repeat_on

повтор_на

повтор_один

повтор_один

повтор_один_на

repeat_one_on

replay

replay

replay_10

replay_10

replay_30

replay_30

replay_5

replay_5

replay_circle_filled

replay_circle_filled

reply

ответ

ответ_все

ответ_все

отчет

report

report_gmailerrorred

report_gmailerrorred

report_off

report_off

report_problem

report_problem

request_page

request_page

request_quote

request_quote

reset_tv

reset_tv

перезагрузка_альт

перезагрузка_альт

ресторан

restaurant

restaurant_menu

restaurant_menu

restore

restore

restore_from_trash

restore_from_trash

restore_page

restore_page

reviews

reviews

rice_bowl

миска для риса

кольцо_объем

кольцо_объем

ракета

rocket

rocket_launch

rocket_launch

roller_shades

roller_shades

roller_shades_closed

roller_shades_closed

roller_skating

roller_skating

roofing

roofing

room

комната

room_preferences

room_preferences

room_service

room_service

rotate_90_degrees_ccw

rotate_90_degrees_ccw

rotate_90_degrees_cw

rotate_90_degrees_cw

rotate_left

rotate_left

rotate_right

rotate_right

roundabout_left

roundabout_left

roundabout_right

roundabout_right

rounded_corner

rounded_corner

route

route

router

router

rowing

rowing

rss_feed

rss_feed

rsvp

rsvp

rtt

rtt

правило

правило

папка_правил

папка_правил

run_circle

run_circle

running_with_errors

running_with_errors

rv_hookup

rv_hookup

safety_check

safety_check

safety_divider

safety_divider

sailing

sailing

дезинфицирующее средство

дезинфицирующее средство

спутник

спутник

satellite_alt

satellite_alt

save

save

save_alt

save_alt

save_as

save_as

saved_search

saved_search

savings

savings

шкала

шкала

сканер

сканер

scatter_plot

scatter_plot

schedule

schedule

schedule_send

schedule_send

schema

schema

school

school

science

science

score

оценка

табло

табло

screen_lock_landscape

screen_lock_landscape

screen_lock_portrait

screen_lock_portrait

screen_lock_rotation

screen_lock_rotation

screen_rotation

screen_rotation

screen_rotation_alt

screen_rotation_alt

screen_search_desktop

screen_search_desktop

screen_share

screen_share

скриншот

screenshot

screenshot_monitor

screenshot_monitor

scuba_diving

scuba_diving

sd_card

sd_card

sd_card_alert

sd_card_alert

sd_storage

sd_storage

search

поиск

поиск_выкл

поиск_выкл

безопасность

security

security_update

security_update

security_update_good

security_update_good

security_update_warning

security_update_warning

segment

segment

select_all

select_all

self_improvement

самосовершенствование

продать

продать

send

send

send_and_archive

send_and_archive

send_time_extension

send_time_extension

send_to_mobile

send_to_mobile

sensor_door

sensor_door

sensor_occupied

sensor_occupied

Sensor_Window

Sensor_Window

Датчики

sensors

sensors_off

sensors_off

sentiment_dissatisfied

sentiment_dissatisfied

sentiment_neutral

sentiment_neutral

sentiment_satisfied

sentiment_satisfied

sentiment_satisfied_alt

sentiment_satisfied_alt

sentiment_very_dissatisfied

настроения_очень_недовольны

sentiment_very_satisfied

sentiment_very_satisfied

set_meal

set_meal

settings

settings

settings_accessibility

settings_accessibility

settings_applications

settings_applications

settings_backup_restore

settings_backup_restore

настройки_блютуз

settings_bluetooth

settings_brightness

settings_brightness

settings_cell

settings_cell

settings_display

settings_display

settings_ethernet

settings_ethernet

settings_input_antenna

settings_input_antenna

settings_input_component

settings_input_component

settings_input_composite

settings_input_composite

settings_input_hdmi

settings_input_hdmi

settings_input_svideo

settings_input_svideo

settings_overscan

settings_overscan

settings_phone

settings_phone

settings_power

settings_power

settings_remote

settings_remote

settings_suggest

settings_suggest

settings_system_daydream

settings_system_daydream

settings_voice

settings_voice

severe_cold

severe_cold

share

share

share_arrival_time

share_arrival_time

share_location

share_location

shield

shield

shield_moon

shield_moon

shop

shop

shop_2

shop_2

shop_two

shop_two

shopify

shopify

корзина для покупок

сумка для покупок

корзина для покупок

корзина для покупок

shopping_cart

shopping_cart

shopping_cart_checkout

shopping_cart_checkout

short_text

short_text

shortcut

shortcut

show_chart

show_chart

shower

shower

перемешивание

перемешивание

перемешивание

перемешивание

shutter_speed

shutter_speed

sick

sick

sign_language

sign_language

signal_cellular_0_bar

signal_cellular_0_bar

signal_cellular_4_bar

signal_cellular_4_bar

signal_cellular_alt

signal_cellular_alt

signal_cellular_alt_1_bar

signal_cellular_alt_1_bar

signal_cellular_alt_2_bar

signal_cellular_alt_2_bar

signal_cellular_connected_no_internet_0_bar

signal_cellular_connected_no_internet_0_bar

signal_cellular_connected_no_internet_4_bar

signal_cellular_connected_no_internet_4_bar

signal_cellular_no_sim

signal_cellular_no_sim

signal_cellular_nodata

signal_cellular_nodata

signal_cellular_null

signal_cellular_null

signal_cellular_off

signal_cellular_off

signal_wifi_0_bar

signal_wifi_0_bar

signal_wifi_4_bar

signal_wifi_4_bar

signal_wifi_4_bar_lock

signal_wifi_4_bar_lock

signal_wifi_bad

signal_wifi_bad

signal_wifi_connected_no_internet_4

signal_wifi_connected_no_internet_4

signal_wifi_off

signal_wifi_off

signal_wifi_statusbar_4_bar

signal_wifi_statusbar_4_bar

signal_wifi_statusbar_connected_no_internet_4

signal_wifi_statusbar_connected_no_internet_4

signal_wifi_statusbar_null

signal_wifi_statusbar_null

signpost

signpost

sim_card

sim_card

sim_card_alert

sim_card_alert

sim_card_download

sim_card_download

single_bed

single_bed

sip

sip

skateboarding

skateboarding

skip_next

skip_next

skip_previous

skip_previous

sledding

sledding

slideshow

slideshow

slow_motion_video

slow_motion_video

smart_button

smart_button

smart_display

smart_display

smart_screen

smart_screen

smart_toy

smart_toy

смартфон

смартфон

smoke_free

smoke_free

smoking_rooms

smoking_rooms

sms

sms

sms_failed

sms_failed

snapchat

snapchat

snippet_folder

snippet_folder

повтор

повтор

сноубординг

сноубординг

snowing

snowing

snowmobile

snowmobile

snowshoeing

snowshoeing

soap

soap

social_distance

social_distance

solar_power

solar_power

sort

sort

sort_by_alpha

sort_by_alpha

sos

sos

soup_kitchen

soup_kitchen

source

source

south

south

south_america

south_america

south_east

south_east

south_west

южный_запад

спа

спа

пробел_бар

пробел_бар

space_dashboard

space_dashboard

spatial_audio

spatial_audio

spatial_audio_off

spatial_audio_off

spatial_tracking

spatial_tracking

speaker

speaker

speaker_group

speaker_group

speaker_notes

динамик_заметки

динамик_заметки_выкл

speaker_notes_off

speaker_phone

speaker_phone

speed

speed

spellcheck

spellcheck

splitscreen

splitscreen

spoke

spoke

sports

спорт

спорт_бар

спорт_бар

спорт_бейсбол

sports_baseball

sports_basketball

sports_basketball

sports_cricket

sports_cricket

sports_esports

sports_esports

sports_football

sports_football

sports_golf

sports_golf

sports_gymnastics

sports_gymnastics

спорт_гандбол

спорт_гандбол

sports_hockey

sports_hockey

sports_kabaddi

sports_kabaddi

sports_martial_arts

sports_martial_arts

sports_mma

sports_mma

sports_motorsports

sports_motorsports

sports_rugby

sports_rugby

sports_score

sports_score

sports_soccer

sports_soccer

sports_tennis

sports_tennis

sports_volleyball

sports_volleyball

square

square

square_foot

square_foot

ssid_chart

ssid_chart

stacked_bar_chart

stacked_bar_chart

stacked_line_chart

stacked_line_chart

stadium

stadium

stairs

stairs

star

star

star_border

star_border

star_border_purple500

star_border_purple500

star_half

star_half

star_outline

star_outline

star_purple500

star_purple500

star_rate

star_rate

stars

stars

start

start

stay_current_landscape

stay_current_landscape

stay_current_portrait

stay_current_portrait

stay_primary_landscape

stay_primary_landscape

stay_primary_portrait

stay_primary_portrait

sticky_note_2

sticky_note_2

stop

stop

stop_circle

stop_circle

stop_screen_share

stop_screen_share

storage

storage

store

store

store_mall_directory

store_mall_directory

storefront

storefront

storm

storm

straight

straight

straighten

straighten

stream

stream

streetview

streetview

strikethrough_s

strikethrough_s

прогулочная коляска

прогулочная коляска

стиль

стиль

subdirectory_arrow_left

subdirectory_arrow_left

subdirectory_arrow_right

subdirectory_arrow_right

subject

subject

subscript

subscript

subscriptions

subscriptions

subtitles

subtitles

субтитры_выкл

субтитры_выкл

subway

subway

summarize

summarize

sunny

sunny

sunny_snowing

sunny_snowing

superscript

superscript

supervised_user_circle

supervised_user_circle

supervisor_account

supervisor_account

техподдержка

техподдержка

support_agent

support_agent

surfing

surfing

surround_sound

surround_sound

swap_calls

swap_calls

swap_horiz

swap_horiz

swap_horizontal_circle

swap_horizontal_circle

swap_vert

swap_vert

swap_vert_circle

swap_vert_circle

swap_vertical_circle

swap_vertical_circle

swipe

swipe

swipe_down

swipe_down

swipe_down_alt

swipe_down_alt

swipe_left

swipe_left

swipe_left_alt

swipe_left_alt

swipe_right

swipe_right

swipe_right_alt

swipe_right_alt

swipe_up

swipe_up

swipe_up_alt

swipe_up_alt

swipe_vertical

swipe_vertical

switch_access_shortcut

switch_access_shortcut

switch_access_shortcut_add

switch_access_shortcut_add

switch_account

switch_account

switch_camera

switch_camera

switch_left

switch_left

switch_right

switch_right

switch_video

switch_video

synagogue

synagogue

sync

sync

sync_alt

sync_alt

sync_disabled

sync_disabled

sync_lock

sync_lock

sync_problem

sync_problem

system_security_update

system_security_update

system_security_update_good

system_security_update_good

system_security_update_warning

system_security_update_warning

system_update

system_update

system_update_alt

system_update_alt

system_update_tv

system_update_tv

tab

tab

tab_unselected

tab_unselected

table_bar

table_bar

table_chart

table_chart

table_restaurant

table_restaurant

table_rows

table_rows

table_view

table_view

tablet

tablet

tablet_android

tablet_android

tablet_mac

tablet_mac

tag

tag

tag_faces

tag_faces

takeout_dining

еда на вынос

tap_and_play

tap_and_play

тапас

tapas

task

task

task_alt

task_alt

taxi_alert

taxi_alert

telegram

telegram

temple_buddhist

temple_buddhist

temple_hindu

Temple_Hindu

терминал

терминал

местность

местность

text_decrease

text_decrease

text_fields

text_fields

text_format

text_format

text_increase

text_increase

text_rotate_up

text_rotate_up

text_rotate_vertical

text_rotate_vertical

text_rotation_angledown

text_rotation_angledown

text_rotation_angleup

text_rotation_angleup

text_rotation_down

text_rotation_down

text_rotation_none

text_rotation_none

text_snippet

text_snippet

textsms

textsms

texture

texture

театр_комедия

театр_комедия

theaters

theaters

thermostat

thermostat

thermostat_auto

thermostat_auto

thumb_down

thumb_down

thumb_down_alt

thumb_down_alt

thumb_down_off_alt

thumb_down_off_alt

thumb_up

thumb_up

thumb_up_alt

thumb_up_alt

thumb_up_off_alt

thumb_up_off_alt

thumbs_up_down

thumbs_up_down

thunderstorm

thunderstorm

tiktok

tiktok

time_to_leave

time_to_leave

timelapse

timelapse

временная шкала

временная шкала

таймер

таймер

timer_10

timer_10

timer_10_select

timer_10_select

timer_3

timer_3

timer_3_select

timer_3_select

timer_off

timer_off

tips_and_updates

tips_and_updates

tyre_repair

tyre_repair

название

название

toc

toc

today

today

toggle_off

toggle_off

toggle_on

toggle_on

token

token

toll

toll

тональность

тональность

тема

тема

торнадо

торнадо

touch_app

touch_app

tour

tour

toys

toys

track_changes

track_changes

traffic

traffic

train

train

tram

трамвай

расшифровка

расшифровка

пересадка_на_станции

передача_внутри_станции

transform

transform

transgender

transgender

transit_enterexit

transit_enterexit

translate

translate

travel_explore

travel_explore

trending_down

trending_down

Trending_Flat

Trending_Flat

trending_neutral

trending_neutral

trending_up

trending_up

trip_origin

trip_origin

troubleshoot

troubleshoot

try

try

tsunami

tsunami

tty

тти

мелодия

мелодия

вольфрам

вольфрам

turn_left

turn_left

turn_right

turn_right

turn_sharp_left

turn_sharp_left

turn_sharp_right

turn_sharp_right

turn_slight_left

turn_slight_left

turn_slight_right

turn_slight_right

turned_in

сдан

сдан_не

turned_in_not

tv_off

tv_off

two_wheeler

two_wheeler

type_specimen

type_specimen

u_turn_left

u_turn_left

u_turn_right

u_turn_right

umbrella

зонтик

разархивировать

разархивировать

отменить

отменить

unfold_less

unfold_less

unfold_more

unfold_more

unpublished

unpublished

unsubscribe

unsubscribe

upcoming

upcoming

update

update

update_disabled

update_disabled

обновление

обновление

upload

upload

upload_file

upload_file

usb

usb

usb_off

usb_off

vaccines

vaccines

vape_free

vape_free

vaping_rooms

vaping_rooms

проверено

проверено

Verified_user

verified_user

vertical_align_bottom

vertical_align_bottom

vertical_align_center

vertical_align_center

vertical_align_top

vertical_align_top

vertical_distribute

vertical_distribute

vertical_shades

vertical_shades

vertical_shades_closed

vertical_shades_closed

vertical_split

vertical_split

vibration

vibration

video_call

video_call

video_camera_back

video_camera_back

video_camera_front

video_camera_front

video_collection

video_collection

видео_файл

видео_файл

видео_метка

video_label

video_library

video_library

video_settings

video_settings

video_stable

video_stable

videocam

videocam

videocam_off

videocam_off

videogame_asset

видеоигра_актив

видеоигра_актив_офф

видеоигра_актив_офф

view_agenda

view_agenda

view_array

view_array

view_carousel

view_carousel

view_column

view_column

view_comfortable

view_comfortable

view_comfy

view_comfy

view_comfy_alt

view_comfy_alt

view_compact

view_compact

view_compact_alt

view_compact_alt

view_cozy

view_cozy

view_day

view_day

view_headline

view_headline

view_in_ar

view_in_ar

view_kanban

view_kanban

view_list

view_list

view_module

view_module

view_quilt

view_quilt

view_sidebar

view_sidebar

view_stream

view_stream

view_timeline

view_timeline

view_week

view_week

vignette

виньетка

вилла

вилла

видимость

visibility

visibility_off

visibility_off

voice_chat

voice_chat

voice_over_off

voice_over_off

voicemail

voicemail

volcano

volcano

volume_down

volume_down

volume_down_alt

volume_down_alt

volume_mute

volume_mute

volume_off

volume_off

volume_up

volume_up

volunteer_activism

volunteer_activism

vpn_key

vpn_key

vpn_key_off

vpn_key_off

vpn_lock

vpn_lock

врпано

врпано

кошелек

wallet

wallet_giftcard

wallet_giftcard

wallet_membership

wallet_membership

wallet_travel

wallet_travel

wallpaper

wallpaper

warehouse

warehouse

warning

warning

предупреждение_янтарный

предупреждение_янтарный

стирка

wash

watch

watch

watch_later

watch_later

watch_off

watch_off

water

water

water_damage

water_damage

water_drop

water_drop

водопад_диаграмма

водопад_диаграмма

волны

волны

waving_hand

waving_hand

wb_auto

wb_auto

wb_cloudy

wb_cloudy

wb_incandescent

wb_incandescent

wb_iridescent

wb_iridescent

wb_shade

wb_shade

wb_sunny

wb_sunny

wb_twighlight

wb_twighlight

wb_twilight

wb_twilight

web

web

web_asset

web_asset

web_asset_off

web_asset_off

web_stories

web_stories

webhook

webhook

wechat

wechat

выходные

выходные

запад

west

whatsapp

whatsapp

whatshot

whatshot

wheelchair_pickup

wheelchair_pickup

where_to_vote

where_to_vote

widgets

widgets

width_full

width_full

ширина_нормальная

ширина_нормальная

ширина_ширина

ширина_ширина

wifi

wifi

wifi_1_bar

wifi_1_bar

wifi_2_bar

wifi_2_bar

wifi_calling

wifi_calling

wifi_calling_3

wifi_calling_3

wifi_channel

wifi_channel

wifi_find

wifi_find

wifi_lock

wifi_lock

wifi_off

wifi_off

wifi_password

wifi_password

wifi_protected_setup

wifi_protected_setup

wifi_tethering

wifi_tethering

wifi_tethering_error

wifi_tethering_error

wifi_tethering_error_rounded

wifi_tethering_error_rounded

wifi_tethering_off

wifi_tethering_off

wind_power

wind_power

window

window

wine_bar

wine_bar

woman

woman

woo_commerce

woo_commerce

wordpress

wordpress

работа

работа

история_работы

история_работы

work_off

work_off

work_outline

work_outline

workspace_premium

workspace_premium

workspaces

workspaces

workspaces_filled

workspaces_filled

workspaces_outline

workspaces_outline

wrap_text

wrap_text

неправильное_местоположение

wrong_location

wysiwyg

wysiwyg

yard

yard

youtube_searched_for

youtube_searched_for

zoom_in

zoom_in

zoom_in_map

zoom_in_map

zoom_out

zoom_out

zoom_out_map

zoom_out_map

Как использовать значки Material Design? Пошаговое руководство

Material Design — одна из самых популярных систем проектирования. Если у вас есть устройство Android, вы ежедневно используете Material Design. Многие компании используют Систему дизайна материалов в качестве основы для создания мобильных и веб-приложений.

Обширная библиотека компонентов и ресурсы системы, в том числе значки материалов (теперь символы материалов), предоставляют организациям и стартапам строительные блоки для неограниченного масштабирования продуктов без проектирования с нуля.

В этой статье рассматриваются символы материалов и другие ресурсы материалов, которые вы можете использовать для своего следующего проекта по разработке продукта.

Содержание

• Что такое материальный дизайн?
  • Запуск символов материалов
  • Набор значков материалов
• Символы материалов — что нового?
  • Три стиля
  • Создайте свои собственные материалы
• Как использовать материалы Google и символы
  • Скачать SVG или PNG
  • CSS/CDN
  • 2528
  • CSS/CDN
  • 525. Icons and Symbols With Typography
    • Weights
    • Sizing & Alignment
    • Material Icons Accessibility
  • Designing with Material Design’s Icons in UXPin
    • Step One – Click the icon element
    • Step Two – Draw an icon on the canvas
    • Шаг третий — панель свойств значка
    • Шаг четвертый — выбор значка
    • Шаг пятый — настройка свойств значка
    • Шаг 6 — добавление взаимодействий
  • Улучшение прототипирования и тестирования с помощью UXPin
  • 9Пользовательский интерфейс и значки 0002 Material Design входят в стандартную комплектацию каждого плана UXPin. Подпишитесь на бесплатную пробную версию, чтобы создавать красивые приложения с UXPin и Material Design уже сегодня!

    Material Design — это библиотека дизайна, разработанная Google, включающая компоненты пользовательского интерфейса, значки, типографику и многое другое. Каждый компонент Material включает рекомендации по реализации, использованию, анатомии, поведению и многому другому, чтобы помочь дизайнерам и инженерам достичь наилучших результатов, обеспечивая при этом высокое качество взаимодействия с пользователем.

    Google представил первую версию Material Design на конференции Google I/O 2014. В мае 2021 года Google выпустила Material Design 3, включая такие важные функции, как Dynamic Color, компоненты складных устройств и дизайнерские токены.

    Запуск символов материалов

    Одним из самых захватывающих последних обновлений Material Design стал запуск Material Symbols — настраиваемого набора значков с более чем 2000 значков с открытым исходным кодом в пяти стилях. Вы по-прежнему можете найти все свои любимые значки материалов, но теперь у вас больше гибкости и возможностей настройки для соответствия требованиям вашего продукта и бренда.

    Материальные значки по-прежнему доступны, но не предлагают такую ​​же настройку, как символы. Вы можете настроить только размер и плотность по сравнению с четырьмя переменными параметрами с символами.

    Набор иконок материалов

    Google сохранил старые значки материалов, хотя и меньше, чем каталог символов. Иконки доступны в пяти стилях: контурный, заполненный, основанный, четкий и двухцветный.

    Символы материалов — что нового?

    Material Icons переместились в Google Fonts, предлагая переменный набор значков в трех стилях: Outlined, Rounded и Sharp. У дизайнеров также есть возможность настроить набор значков с помощью четырех переменных или осей:

    • Заполнение: Заполнить или незаполненное появление
    • Вес: Определяет инсульт символа от 100 до 700 веса
    • Стал: Гранулярные корректировки к толщине символа:
    • 106

      -optics optics. 24, 40 или 48 пикселей

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

    Три стиля

    Google также представила три новых стиля, соответствующих фирменному стилю и дизайну пользовательского интерфейса.

    • В общих чертах: Чистота и свет. Дизайнеры могут настроить вес значка в соответствии со шрифтами продукта.
    • Закругленный: Изогнутая эстетика хорошо сочетается с закругленными логотипами и более крупными шрифтами.
    • Sharp: Разработан, чтобы соответствовать пользовательским интерфейсам с прямыми краями и стилем с углами под углом 90 градусов.

    Создание собственных значков материалов

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

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

    Следуя этим полезным рекомендациям, вы можете использовать обширный набор значков Material, включив в него несколько соответствующих вашему бренду.

    Как использовать значки и символы материалов Google

    Существует несколько способов, которыми дизайнеры и инженеры могут использовать значки и символы материалов.

    Загрузка SVG или PNG

    Вы можете скачать значки и символы в формате SVG или PNG. Мы рекомендуем использовать SVG из-за его преимуществ производительности и настройки. Файлы PNG намного больше по размеру, и дизайнерам и инженерам сложнее их редактировать и изменять размер.

    Google позволяет настраивать значки и символы перед загрузкой, поэтому у вас есть готовый ресурс для использования в вашем проекте.

    CSS/CDN

    Material Symbols предоставляет файл CSS для установки веб-сайта, аналогичный тому, что вы используете для шрифтов Google. Проблема с этим методом заключается в том, что он требует от вашего веб-сайта дополнительных запросов, которые могут серьезно повлиять на производительность.

    Если вы планируете использовать более одного символа материала, лучше использовать другой метод установки.

    Операционные системы и платформы

    Material Icons and Symbols предлагает загрузку для Android и iOS для установки в качестве активов проекта с фрагментами кода для реализации. Material Design включает инструкции для Flutter (разработанный Google язык программирования) и Angular. Инструкции React доступны в документации MUI.

    Использование конструктора

    Большинство инструментов дизайна предлагают плагины или расширения для значков материалов. Если вы используете UXPin, полный набор значков материалов входит в стандартную комплектацию каждого плана.

    Вы также можете импортировать свои собственные значки SVG, редактировать их в UXPin и сохранять в своей системе дизайна, чтобы поделиться с другими членами команды.

    Использование значков и символов материалов с типографикой

    Документация Google Material 3 предлагает советы и рекомендации по сочетанию иконок с типографикой.

    Гири

    Никогда не используйте разный вес для значков и текста. Google позволяет легко связать эти активы с переменной настройки веса символов материала. Убедитесь, что вы всегда сопоставляете вес шрифта с весом значка, чтобы добиться чистой и последовательной эстетики.

    Правильный вес шрифта.

    Неправильный вес шрифта.

    Размеры и выравнивание

    Всегда согласовывать размер значка и выравнивание с текстом. Пользователи должны иметь возможность прочитать оба и признать, что они связаны. Google рекомендует дизайнерам «уменьшить базовую линию символов примерно до 11,5% размера шрифта». Этот метод обеспечивает единообразие и выравнивание значков и текста.

    Доступность значков материалов

    Google дает краткие, но полезные советы дизайнерам по доступности значков. Дизайнеры всегда должны использовать осмысленные описательные метки со значками, особенно для навигации. Значки без текстовых меток могут показаться пользователям неоднозначными и запутанными. Дизайнеры также должны включать замещающий текст для программ чтения с экрана и других вспомогательных технологий.

    Целевой размер также является важным фактором для значков. Люди с большими пальцами или инвалидностью рук могут случайно нажать не ту кнопку со значком, что вызовет замешательство и разочарование.

    Google рекомендует дизайнерам использовать минимальный целевой размер 48 пикселей. Если вы используете 20-пиксельную иконку, предоставьте достаточно отступов, чтобы общая целевая область составляла 48 пикселей.

    Благодаря нескольким наборам значков, в том числе значкам материалов, предустановленным с помощью UXPin, дизайнерам не нужно устанавливать плагины или загружать внешние файлы. Вот как легко добавить значки в свой проект.

    Шаг первый. Щелкните элемент значка

    Щелкните элемент значка на панели быстрых инструментов слева от холста. Кроме того, вы можете использовать сочетание клавиш OPTION+I (на Mac) или ALT+I (на ПК).

    Шаг второй.

    Нарисуйте значок на холсте

    Щелкните и перетащите квадрат в то место на холсте, где вы хотите разместить значок. Удерживайте нажатой клавишу SHIFT, чтобы сохранить одинаковую ширину и высоту.

    Шаг третий — панель свойств значка

    После того, как вы нарисуете значок, на правой панели свойств появится панель свойств значка. Вы можете выбрать Material Icons или один из других наборов, включая Fonts Awesome, Retina Icons и набор UXPin, и это лишь некоторые из них.

    Шаг четвертый — выберите значок

    Прокрутите доступные значки материалов, чтобы найти то, что вам нужно. Щелкните любой значок на панели свойств (пока значок выбран на холсте), чтобы сделать выбор.

    Шаг пятый. Настройка свойств значка

    После того, как вы выбрали значок, вы можете изменить его стиль с помощью панели свойств над разделом Icon . Под палитрой цветов находится раскрывающийся список с доступными системами дизайна, включая Material Design, поэтому дизайнерам не нужно копировать/вставлять HEX-коды из других источников.

    Шаг 6. Добавление взаимодействий

    В верхней части панели свойств вы найдете «Взаимодействия». Добавьте взаимодействия, анимацию, переходы и т. д., чтобы сделать ваши значки интерактивными. Например, мы можем захотеть, чтобы этот значок пользователя открывал персональную страницу профиля.

    Ознакомьтесь с интерактивными шаблонами пользовательского интерфейса и примерами приложений UXPin, чтобы узнать, как работают функции UXPin и что возможно с дизайном на основе кода.

    Улучшение прототипирования и тестирования с помощью UXPin

    Material Icons — это лишь одно из удобств работы в UXPin. Наша цель — помочь дизайнерам создавать прототипы быстрее и с большей функциональностью и точностью в качестве инструментов дизайна на основе изображений.

    Используя одну из встроенных библиотек дизайна UXPin, дизайнеры могут перетаскивать элементы для создания интерактивных прототипов за считанные минуты. Мы включили пять популярных библиотек дизайна для любого типа проектов, от веб-сайтов до веб-приложений и мобильных приложений для предприятий и продуктов B2C.

    Каждый план UXPin включает в себя Material Design, iOS, Bootstrap, Foundation и User Flows с интерактивными элементами каждой библиотеки, цветами, стилями текста и значками.

    Функция Design Systems

    UXPin позволяет дизайнерам создавать систему дизайна с нуля, автоматически разделяя библиотеку на цвета, активы, типографику и компоненты. Вы также можете настроить разрешения и включить документацию для дизайнеров и инженеров.

    Создавайте лучшие прототипы, которые точно воспроизводят конечный продукт, используя инструмент проектирования на основе кода UXPin. Подпишитесь на бесплатную пробную версию, чтобы открыть для себя возможности дизайна с UXPin.

    Иконки в стиле Material Design – различные способы их использования

    Иконки в стиле Material Design – различные способы их использования | Desircle – блог о дизайне Перейти к содержимому

    Подпишитесь на нашу рассылку

    Имя

    Электронная почта

    Instagram Facebook Twitter Youtube Pinterest

    Поиск

    Домастика Распродажа: последний шанс!

    Реализуйте свои творческие идеи

    СКИДКА до 65% на курсы

    Дни

    Часы

    Минуты

    Секунды

    Значки Material Design — это официальные значки, предоставляемые Google для приложений и веб-сайтов Android.

    Значки Material Design Основные характеристики

    • Единый стиль, который отлично смотрится на всех устройствах и платформах
    • Прост в использовании и поставляется с широким набором значков
    • Открытый исходный код, так что вы можете адаптировать их под свои нужды.

    Иконки Material Design Цены

    Начиная с:

    $ 0/месяц

    Информация о ценах:

    Иконки Material Design доступны бесплатно на официальном сайте. Вы можете использовать их в своих приложениях для Android, на веб-сайтах и ​​в проектах, и нет никаких ограничений на то, как вы можете их использовать.

    Значки Material Design

    Значки Material Design — это официальные значки, предоставляемые Google для приложений и веб-сайтов Android.

    Что такое значки Material Design?

    Значки Material Design — это официальных значка, предоставленных Google для приложений и веб-сайтов Android .

    Они следуют рекомендациям по дизайну материалов, благодаря которым они выглядят чистыми и согласованными на разных платформах.

    Материальный дизайн — это набора принципов дизайна, разработанных Google в 2014 году . Он был создан для обеспечения унифицированного взаимодействия с пользователем на всех устройствах.

    Значки материального дизайна являются официальными значками материального дизайна и следуют принципам материального дизайна.

    Хотите создать красивый и последовательный дизайн для своего приложения или веб-сайта для Android?

    Иконки Material Design — идеальный способ добиться этого. Их значки одинаковы и адаптируются к любой платформе.

    С помощью значков Material Design вы можете создавать потрясающие дизайны, которые отлично смотрятся на всех устройствах.

    У вас будет единый язык дизайна, который выделит ваше приложение или веб-сайт среди конкурентов.

    Скачайте Material Design Icons бесплатно сегодня и начните создавать красивые дизайны, которые будут выглядеть потрясающе на всех платформах!

    Как работают значки Material Design

    Существует три способа использования значков Material Design: в приложении для Android, на веб-сайте и в проектах.

    В приложении для Android вы можете использовать значки Material Design в качестве ресурсов в файлах макетов.

    На своем веб-сайте вы можете включить их как часть HTML-тега. В своих проектах вы можете использовать их как часть графики или иллюстраций.

    Основным программным обеспечением, поддерживающим значки Material Design, является Android Studio. Однако их также можно использовать в других программах для дизайна, таких как Adobe Photoshop и Illustrator.

    Если вы хотите узнать больше о значках Material Design или вам нужна помощь в их использовании в приложении или на веб-сайте для Android, посетите официальную страницу значков Material Design.

    Здесь вы найдете ряд ресурсов, включая руководства, ответы на часто задаваемые вопросы и многое другое.

    Загрузите бесплатно набор иконок Material Design.

    Если вам нужны дополнительные значки или вы хотите использовать их в коммерческом проекте, вы можете приобрести их на сайте Icons8.

    Здесь вы найдете ряд наборов значков, которые идеально подходят для различных целей.

    Значки Material Design

    Значки Material Design — это официальные значки, предоставляемые Google для приложений и веб-сайтов Android.

    🔥 Trending Tools

    Jitter

    Jitter — это инструмент для редактирования видео, который позволяет создавать профессиональные анимации и переходы всего за несколько простых шагов.

    Sessions

    Sessions изменяет структуру видеосвязи, объединяя все инструменты для совместной работы в одном месте.

    Значки Material Design

    Значки Material Design — это официальные значки, предоставляемые Google для приложений и веб-сайтов Android.

    UXHunt

    UXHunt — это веб-сайт, который предоставляет библиотеку дизайнерских ресурсов для веб-дизайнеров.

    Coursera

    Coursera — это образовательная онлайн-платформа, предлагающая открытые онлайн-курсы.

    Узнавайте первыми о последних инструментах Trending Tools (Еженедельные обновления)

    Имя

    Электронная почта

    Установив этот флажок, вы подтверждаете, что прочитали и согласны с нашими условиями использования в отношении хранения данных, отправленных через эта форма.

    Такие же, как вы, также искали

    Бесплатно + Платно

    БЕСПЛАТНАЯ ПРОБНАЯ ВЕРСИЯ

    Jitter

    Jitter — это профессиональный инструмент для редактирования видео, который позволяет создавать анимацию переходов всего за несколько шагов.

    Sessions

    Sessions меняет структуру видеосвязи, объединяя все инструменты для совместной работы в одном месте.

    Значки Material Design

    Значки Material Design — это официальные значки, предоставляемые Google для приложений и веб-сайтов Android.

    UXHunt

    UXHunt — это веб-сайт, который предоставляет библиотеку дизайнерских ресурсов для веб-дизайнеров.

    Бесплатно + Платно

    Coursera

    Coursera — это образовательная онлайн-платформа, предлагающая открытые онлайн-курсы.

    БЕСПЛАТНАЯ ПРОБНАЯ ВЕРСИЯ

    Unbounce

    Unbounce — это конструктор целевых страниц для генерации потенциальных клиентов и списка адресов электронной почты.

    • GEARS
    • TOOLS
    • LOGO DESIGN
    • PROCREATE
    • SHOP
    • GRAPHIC DESIGN
    • TYPOGRAPHY
    • PHOTOGRAPHY
    • FREELANCING
    • COURSES
    • BOOKS
    • GUIDES
    • NEWS
    • СООБЩЕСТВО
    • ЛУЧШИЕ ПРЕДЛОЖЕНИЯ
    • ПАРТНЕРЫ

    Следуйте за Desircle

    Facebook Twitter YouTube Instagram Pinterest

    Получить уведомление о последнем обновлении новостей дизайна из нашего блога

    Имя

    Электронная почта

    • 25. Capyright © 202151511111 год

      Электронный Desircle — это торговая марка, принадлежащая Алессио Маркетти, P.IVA 03852420243

    Сайт, облегчающий поиск значков Material Design — делитесь своими проектами!

    бессарабов (Иван Бессарабов) 9 июня, 2020, 10:36

    #1

    Я создал сайт https://mdi. bessarabov.com Идея состоит в том, чтобы упростить поиск нужной вам иконки Material Design.

    Мне очень нравятся Home Assistant и Material Design Icons, но я не могу пользоваться официальным сайтом https://materialdesignicons.com — он очень тормозит. Есть и другие проблемы с этим сайтом, но главная из них — скорость его работы.

    Итак, я создал сайт для иконок, которые хочу использовать.

    • Это быстро. (используются статические HTML-файлы)
    • Имеет мобильную версию
    • Для каждого значка есть страница
    • Предварительный просмотр значка для при публикации ссылки
    • Есть поиск (попробуйте поискать «вышка»)

    Я очень рад, что могу создавать ссылки на иконки в README.md в моей пользовательской открытке с ловеласом

    Я в основном использую значки Material Design для использования их в Home Assistant, поэтому я пометил некоторые значки областями, которые я использую чаще всего:

    • тег «лампа»
    • тег «электричество»
    • тег «вода»

    Я надеюсь, что этот сайт может быть вам полезен.

    Дополнительная информация об этом проекте в моем блоге https://ivan.bessarabov.com/blog/mdi-bessarabov-com-is-released

    ОБНОВЛЕНИЕ 23.06.2020

    Я только что выпустил новые функции на этом ил. Теперь есть информация о первой версии, когда появилась иконка и сообщение о том, доступна ли она в Home Assistant, а также пример использования кода HA и превью:

    Скриншот 23.06.2020 на 13.56.321552×989 150 КБ

    (это скриншот со страницы https://mdi.bessarabov.com/icon/fridge-alert )

    54 лайка

    полтинник 9 июня 2020 г., 11:22

    #2

    довольно круто. только что добавил пару в свой графический интерфейс, потому что его было легко и быстро найти. Теги аккуратные.

    Одно предложение, если позволите. Можете ли вы добавить еще один вариант копирования с включенным «icon:»? Это сделало бы их добавление немного быстрее…

    добавлено на мою боковую панель:

     panel_iframe:
      значокиндекс:
        title: "Другие значки"
        значок: «mdi: поделиться»
        адрес: "https://mdi. bessarabov.com/"
     

    1 Нравится

    tom_l 9 июня 2020 г., 11:49

    #3

    Я вижу, вы используете последнюю доступную версию. Есть ли шанс найти фильтр для последней версии, поддерживаемой домашним помощником?

    1 Нравится

    ГордонТГофер (Гордон В.) 9 июня 2020 г., 12:09

    #4

    Ни в коем случае не критикуя вашу работу, я согласен, что поиск на основном сайте очень медленный, однако я нахожу «находку» на https://cdn.materialdesignicons.com/4.4.95/ (кажется 4.4.95 является последней версией, поддерживаемой в HA) довольно быстро для поиска, это избавит вас от обновления сайта каждый раз, когда HA обновляет версию, которую они поддерживают.

    2 лайков

    бессарабов (Иван Бессарабов) 9 июня 2020 г., 15:03

    #5

    Спасибо!

    Подскажите, пожалуйста, какая система ожидает информацию об инко в виде icon:car ?

    бессарабов (Иван Бессарабов) 9 июня 2020 г., 15:17

    #6

    Да, вы правы. На сайте https://mdi.bessarabov.com представлена ​​последняя версия иконок в стиле Material Design.
    Но Home Assistant использует mdi 4.9.95 — https://github.com/home-assistant/frontend/blob/edc4601f8e24a1260b7fd3ed54126ad465f786f1/package. json#L39-L40

    Я очень надеюсь, что Home Assistant скоро обновит mdi (если я поймите правильно 0.110 изменения в иконках были внесены для возможности обновления mdi).

    Пока у меня нет точного плана, как ограничить иконки на сайте только какой-то версией. Я хотел бы написать на странице иконок «что эта иконка была впервые представлена ​​в mdi 1.2.3», но пока я не знаю, где взять эти данные (извините, но я не могу сказать, когда я сделаю эту функцию)

    бессарабов (Иван Бессарабов) 9 июня 2020 г., 15:20

    #7

    Да, спасибо. Я знаю о https://cdn.materialdesignicons.com/4.4.95/, и я вполне доволен этим сайтом, но ему не хватает некоторых функций, которые должен предоставлять сайт с тонкими иконками: страница для каждой иконки и мобильная версия. Я должен был упомянуть этот сайт в своем тексте.

    полтинники 9 июня, 2020, 20:27

    #8

    Извините, я имею в виду,

     значок: 'mdi:car'
     

    для прямого копирования/вставки в HA

    dubsix (Рик) 9 июня 2020 г., 23:49

    #9

    хорошо, выглядит как забавный небольшой проект, чтобы поиграть с их API

    улучшение, которое я бы предложил, начать показывать результаты после ввода первого символа и обновлять после каждого нового или удаленного символа

    ШонМ 10 июня 2020 г. , 2:01

    #10

    Отличная работа на сайте! Гораздо быстрее официального.

    Одна из основных причин, по которой HA еще не обновлена ​​до последней версии значков Material Design, заключается в том, что MDI v5.0 содержит очень большое количество критических изменений — переименован 121 значок, например удалено 70 значков брендов и т. д.

    4 лайков

    (Ник Раут) 11 июня 2020 г., 6:05

    #11

    Боже, меня тошнит от того, что официальный сайт mdi такой медленный. Замечательно! Большое спасибо.

    2 лайков

    Simone_Padovan (Симона Падован) 17 июня 2020 г. , 8:43

    #12

    Привет, как я могу использовать эти красивые значки с помощью JSF? спасибо

    Никрут (Ник Раут) 17 июня 2020 г., 19:36

    №13

    Что такое jsf?

    Simone_Padovan (Симона Падован) 18 июня 2020 г., 5:36

    №14

    Сервер JAVA сталкивается с

    MISEV (Нильс) 19 июня, 2020, 14:50

    №15

    ах, отлично, так намного быстрее Спасибо и продолжайте в том же духе

    bessarabov (Иван Бессарабов) 23 июня 2020 г. , 11:08

    №16

    Я только что выпустил обновленную версию сайта. Теперь есть текстовое поле с образцом yaml Home Assistant:

    Скриншот 2020-06-23 в 14.05.3

    ×412 35,8 КБ

    (это страница со скриншота https://mdi.bessarabov.com/icon/bullseye )

    Это не совсем то, что вы просили, но, возможно, вам подойдет.

    Нелисс 27 сентября 2020 г., 15:30

    # 17

    Это очень удобно при разработке моей пользовательской карты. Большое спасибо!
    Я действительно ненавижу официальный сайт, кажется, что мой браузер почти вылетает при каждом поиске.
    Небольшой вопрос: я слышал, что есть специальные hass: иконки. Специально для пользовательского интерфейса высокой доступности. Они включены?

    1 Нравится

    бессарабов (Иван Бессарабов) 27 сентября 2020 г., 17:22

    # 18

    Спасибо!

    Извините, я ничего не знаю о hass: значках. Я искал все файлы уценки, которые используются для создания https://www.home-assistant.io (репозиторий https://github.com/home-assistant/home-assistant.io), и я нашел только одно использование такого значка. hass:tv на странице https://www.home-assistant.io/lovelace/entities/

    Я провел несколько экспериментов, и похоже, что не имеет значения, какой префикс использовать mdi: или hass: . Я пробовал mdi:cog , и он выглядит так же, как hass:cog , mdi:car такой же, как hass:car .

    Я не нашел доказательств, но думаю, что hass: — это префикс, который использовался некоторое время назад, и теперь он устарел в версии mdi: (похоже, это правда, но я могу быть совершенно неправильно, может кто подтвердит или скажет, что это не так)

    л4си (Волкер) 17 января 2021 г., 12:06

    # 19

    очень нравится сайт — такой полезный! Спасибо за вашу работу

    1 Нравится

    тунг256 (тунг) 23 февраля 2021 г., 14:29

    #20

    это потрясающе круто! большое спасибо

    1 Нравится

    следующая страница →

    Значки Material Design (последние)

    1	КАБЕЛЬ_ДАННЫЕ	mdi2c-кабель-данные
    2	КЭШИРОВАНО	mdi2c-кешированный
    3	КАКТУС	mdi2c-кактус
    4	ТОРТ	торт mdi2c
    5	ТОРТ_СЛОЙРЕД	mdi2c-торт многослойный
    6	ТОРТ_ВАРИАНТ	mdi2c-торт-вариант
    7	КАЛЬКУЛЯТОР	mdi2c-калькулятор
    8	КАЛЬКУЛЯТОР_ВАРИАНТ	mdi2c-калькулятор-вариант
    9	КАЛЬКУЛЯТОР_ВАРИАНТ_РАСЧЕТ	mdi2c-калькулятор-вариант-схема
    10	КАЛЕНДАРЬ	mdi2c-календарь
    11	КАЛЕНДАРЬ_АККАУНТ	mdi2c-календарь-счет
    12	CALENDAR_ACCOUNT_OUTLINE	mdi2c-календарь-аккаунт-схема
    13	КАЛЕНДАРЬ_ALERT	mdi2c-календарь-предупреждение
    14	CALENDAR_ARROW_LEFT	mdi2c-календарь-стрелка-влево
    15	CALENDAR_ARROW_RIGHT	mdi2c-календарь-стрелка-вправо
    16	КАЛЕНДАРЬ_ПУСТО	mdi2c-календарь-пусто
    17	КАЛЕНДАРЬ_BLANK_MULTIPLE	mdi2c-календарь-пусто-несколько
    18	КАЛЕНДАРЬ_BLANK_OUTLINE	mdi2c-календарь-пустой-контур
    19	КАЛЕНДАРЬ_ПРОВЕРКА	mdi2c-проверка календаря
    20	CALENDAR_CHECK_OUTLINE	mdi2c-calendar-check-outline
    21	КАЛЕНДАРЬ_ЧАСЫ	mdi2c-календарь-часы
    22	КАЛЕНДАРЬ_КУРСОР	mdi2c-календарь-курсор
    23	КАЛЕНДАРЬ_РЕДАКТИРОВАТЬ	mdi2c-календарь-редактирование
    24	КАЛЕНДАРЬ_END	mdi2c-конец календаря
    25	КАЛЕНДАРЬ_ЭКСПОРТ	mdi2c-календарь-экспорт
    26	КАЛЕНДАРЬ_СЕРДЦЕ	mdi2c-календарь-сердце
    27	КАЛЕНДАРЬ_ИМПОРТ	mdi2c-календарь-импорт
    28	КАЛЕНДАРЬ_БЛОКИРОВКА	mdi2c-календарь-блокировка
    29	CALENDAR_LOCK_OUTLINE	mdi2c-календарь-замок-схема
    30	КАЛЕНДАРЬ_МИНУС	mdi2c-календарь-минус
    31	КАЛЕНДАРЬ_МЕСЯЦ	mdi2c-календарный месяц
    32	CALENDAR_MONTH_OUTLINE	mdi2c-календарь-месяц-схема
    33	КАЛЕНДАРЬ_НЕСКОЛЬКО	mdi2c-календарь-несколько
    34	КАЛЕНДАРЬ_MULTIPLE_CHECK	mdi2c-календарь-множественная проверка
    35	КАЛЕНДАРЬ_MULTISELECT	mdi2c-календарь-мультиселект
    36	КАЛЕНДАРЬ_OUTLINE	mdi2c-календарь-схема
    37	КАЛЕНДАРЬ_ПЛЮС	mdi2c-календарь-плюс
    38	КАЛЕНДАРЬ_ВОПРОС	mdi2c-календарь-вопрос
    39	КАЛЕНДАРЬ_ДИАПАЗОН	mdi2c-диапазон календаря
    40	CALENDAR_RANGE_OUTLINE	mdi2c-календарь-диапазон-контур
    41	КАЛЕНДАРЬ_ОБНОВЛЕНИЕ	mdi2c-обновление календаря
    42	КАЛЕНДАРЬ_REFRESH_OUTLINE	mdi2c-календарь-обновление-контур
    43	КАЛЕНДАРЬ_УДАЛИТЬ	mdi2c-календарь-удалить
    44	КАЛЕНДАРЬ_REMOVE_OUTLINE	mdi2c-календарь-удалить-контур
    45	КАЛЕНДАРЬ_ПОИСК	mdi2c-календарь-поиск
    46	КАЛЕНДАРЬ_ЗВЕЗДА	mdi2c-календарь-звезда
    47	КАЛЕНДАРЬ_START	mdi2c-календарь-начало
    48	CALENDAR_SYNC	mdi2c-календарь-синхронизация
    49	CALENDAR_SYNC_OUTLINE	mdi2c-календарь-синхронизация-схема
    50	КАЛЕНДАРЬ_ТЕКСТ	mdi2c-календарь-текст
    51	CALENDAR_TEXT_OUTLINE	mdi2c-календарь-текст-схема
    52	КАЛЕНДАРЬ_СЕГОДНЯ	mdi2c-календарь-сегодня
    53	КАЛЕНДАРЬ_НЕДЕЛЯ	mdi2c-календарная неделя
    54	CALENDAR_WEEK_BEGIN	mdi2c-календарь-начало недели
    55	CALENDAR_WEEKEND	mdi2c-календарь-выходные
    56	CALENDAR_WEEKEND_OUTLINE	mdi2c-календарь-выходные-план
    57	CALL_MADE	mdi2c-вызов сделан
    58	CALL_MERGE	mdi2c-вызов-слияние
    59	CALL_MISSED	mdi2c-пропущенный вызов
    60	ВЫЗОВ_ПОЛУЧЕН	mdi2c-полученный вызов
    61	CALL_SPLIT	mdi2c-разделение вызовов
    62	ВИДЕОКАМЕРА	mdi2c-видеокамера
    63	ВИДЕОКАМЕРА_ВЫКЛ	mdi2c-видеокамера выключена
    64	КАМЕРА	mdi2c-камера
    65	КАМЕРА_АККАУНТ	mdi2c-камера-аккаунт
    66	КАМЕРА_СЪЕМКА	mdi2c-взрыв камеры
    67	КАМЕРА_УПРАВЛЕНИЕ	mdi2c-управление камерой
    68	КАМЕРА_УЛУЧШЕННАЯ	mdi2c-камера-улучшение
    69	CAMERA_ENHANCE_OUTLINE	mdi2c-camera-enhance-контур
    70	КАМЕРА_ФЛИП	mdi2c-камера-флип
    71	CAMERA_FLIP_OUTLINE	mdi2c-camera-flip-outline
    72	КАМЕРА_ПЕРЕДНЯЯ	mdi2c-камера-передняя
    73	КАМЕРА_ПЕРЕДНИЙ_ВАРИАНТ	mdi2c-камера-передний вариант
    74	КАМЕРА_GOPRO	mdi2c-камера-gopro
    75	КАМЕРА_ИЗОБРАЖЕНИЕ	mdi2c-камера-изображение
    76	КАМЕРА_ДИАФРАГМА	mdi2c-камера-диафрагма
    77	CAMERA_METERING_CENTER	mdi2c-камера-измерительный центр
    78	КАМЕРА_ИЗМЕРЕНИЕ_МАТРИЦА	mdi2c-матрица замера камеры
    79	КАМЕРА_ЗАМЕР_ЧАСТИЧНЫЙ	mdi2c-камера-замер-частичный
    80	CAMERA_METERING_SPOT	mdi2c-камера-точка замера
    81	КАМЕРА_ВЫКЛ	mdi2c-камера выключена
    82	КАМЕРА_OUTLINE	mdi2c-камера-схема
    83	КАМЕРА_ВЕЧЕРИНКА_РЕЖИМ	mdi2c-камера-вечеринка-режим
    84	КАМЕРА_ПЛЮС	mdi2c-камера-плюс
    85	КАМЕРА_ПЛЮС_OUTLINE	mdi2c-камера-плюс-схема
    86	КАМЕРА_ЗАДНЯЯ	mdi2c-камера заднего вида
    87	КАМЕРА_ЗАДНЯЯ_ВАРИАНТ	mdi2c-камера заднего вида
    88	КАМЕРА_ВОЗВРАТ	mdi2c-камера-повторная съемка
    89	КАМЕРА_RETAKE_OUTLINE	mdi2c-camera-retake-контур
    90	ПЕРЕКЛЮЧАТЕЛЬ КАМЕРЫ	mdi2c-переключатель камеры
    91	CAMERA_SWITCH_OUTLINE	mdi2c-camera-switch-outline
    92	КАМЕРА_ТАЙМЕР	mdi2c-камера-таймер
    93	КАМЕРА_БЕСПРОВОДНАЯ	mdi2c-камера-беспроводная связь
    94	КАМЕРА_БЕСПРОВОДНАЯ_OUTLINE	mdi2c-камера-беспроводная-схема
    95	КАМНЯ	mdi2c-костер
    96	ОТМЕНА	mdi2c-отмена
    97	СВЕЧА	mdi2c-свеча
    98	КОНФЕТНЫЙ Тростник	mdi2c-конфета
    99	КОНОПЛЯ	mdi2c-каннабис
    100	CANNABIS_OFF	mdi2c-каннабис-офф
    101	CAPS_LOCK	mdi2c-caps-lock
    102	АВТОМОБИЛЬ	mdi2c-car
    103	CAR_2_PLUS	mdi2c-car-2-плюс
    104	CAR_3_PLUS	mdi2c-car-3-plus
    105	CAR_ARROW_LEFT	mdi2c-автомобиль-стрелка-влево
    106	CAR_ARROW_RIGHT	mdi2c-автомобиль-стрелка-вправо
    107	CAR_BACK	mdi2c-задняя часть автомобиля
    108	АВТОМОБИЛЬНАЯ БАТАРЕЯ	mdi2c-автомобильный аккумулятор
    109	CAR_BRAKE_ABS	mdi2c-автомобильный тормоз-абс
    110	CAR_BRAKE_ALERT	mdi2c-car-тормоз-оповещение
    111	CAR_BRAKE_HOLD	mdi2c-car-brake-hold
    112	CAR_BRAKE_PARKING	mdi2c-автомобильный тормоз-стоянка
    113	CAR_BRAKE_RETARDER	mdi2c-автомобильный тормоз-замедлитель
    114	CAR_CHILD_SEAT	mdi2c-car-детское сиденье
    115	CAR_CLUTCH	mdi2c-автомобильное сцепление
    116	CAR_COG	mdi2c-car-cog
    117	CAR_CONNECTED	mdi2c-автомобиль
    118	АВТОМОБИЛЬ_КАБРИОЛЕТ	mdi2c-автомобиль с откидным верхом
    119	CAR_COOLANT_LEVEL	mdi2c-уровень охлаждающей жидкости автомобиля
    120	CAR_CRUISE_CONTROL	mdi2c-автомобильный круиз-контроль
    121	CAR_DEFROST_FRONT	mdi2c-автомобильная разморозка спереди
    122	CAR_DEFROST_REAR	mdi2c-car-размораживание-зад
    123	CAR_DOOR	mdi2c-автомобильная дверь
    124	CAR_DOOR_LOCK	mdi2c-автомобильный дверной замок
    125	CAR_ELECTRIC	mdi2c-car-electric
    126	CAR_ELECTRIC_OUTLINE	mdi2c-car-electric-outline
    127	CAR_EMERGENCY	mdi2c-автомобиль-аварийный
    128	АВТОМОБИЛЬ_ESP	mdi2c-car-esp
    129	АВТОМОБИЛЬ_УНИВЕРСАЛ	mdi2c-car-универсал
    130	CAR_HATCHBACK	mdi2c-автомобиль-хэтчбек
    131	CAR_INFO	mdi2c-car-info
    132	CAR_KEY	mdi2c-автомобильный ключ
    133	CAR_LIFTED_PICKUP	mdi2c-поднятый-пикап
    134	CAR_LIGHT_DIMMED	mdi2c-автомобильный свет с затемнением
    135	CAR_LIGHT_FOG	mdi2c-car-light-противотуманки
    136	CAR_LIGHT_HIGH	mdi2c-car-light-high
    137	АВТОМОБИЛЬ_ЛИМУЗИН	mdi2c-автомобиль-лимузин
    138	CAR_MULTIPLE	mdi2c-car-multiple
    139	АВТОМОБИЛЬ_ВЫКЛ	mdi2c-car-off
    140	CAR_OUTLINE	mdi2c-car-контур
    141	CAR_PARKING_LIGHTS	mdi2c-автомобильные стояночные огни
    142	CAR_PICKUP	mdi2c-автомобиль-пикап
    143	АВТОМОБИЛЬНОЕ СИДЕНЬЕ	mdi2c-автокресло
    144	CAR_SEAT_COOLER	mdi2c-охладитель автокресла
    145	CAR_SEAT_HEATER	mdi2c-автомобильный обогреватель
    146	НАСТРОЙКИ АВТОМОБИЛЯ	mdi2c-автомобильные настройки
    147	CAR_SHIFT_PATTERN	mdi2c-car-shift-pattern
    148	СТОРОНА АВТОМОБИЛЯ	mdi2c со стороны автомобиля
    149	АВТОМОБИЛЬ_СПОРТ	mdi2c-car-спорт
    150	CAR_TIRE_ALERT	mdi2c-предупреждение о автомобильных шинах
    151	CAR_TRACTION_CONTROL	mdi2c-car-traction-control
    152	АВТОМОБИЛЬ_ТУРБОКОМПЕНСАТОР	mdi2c-car-турбокомпрессор
    153	АВТОМОЙКА	mdi2c-мойка
    154	CAR_WINDSHIELD	mdi2c-лобовое стекло автомобиля
    155	CAR_WINDSHIELD_OUTLINE	mdi2c-автомобильный контур лобового стекла
    156	КАРАБИН	mdi2c-карабин
    157	КАРАВАН	mdi2c-караван
    158	КАРТА	mdi2c-карта
    159	CARD_ACCOUNT_DETAILS	mdi2c-card-account-details
    160	CARD_ACCOUNT_DETAILS_OUTLINE	mdi2c-card-account-details-outline
    161	CARD_ACCOUNT_DETAILS_STAR	mdi2c-card-count-details-star
    162	CARD_ACCOUNT_DETAILS_STAR_OUTLINE	mdi2c-card-account-details-star-outline
    163	CARD_ACCOUNT_MAIL	mdi2c-card-account-mail
    164	CARD_ACCOUNT_MAIL_OUTLINE	mdi2c-card-account-mail-outline
    165	CARD_ACCOUNT_PHONE	mdi2c-card-account-phone
    166	CARD_ACCOUNT_PHONE_OUTLINE	mdi2c-card-account-phone-outline
    167	CARD_BULLETED	mdi2c-card-bulleted
    168	CARD_BULLETED_OFF	mdi2c-карта пуленепробиваемая
    169	CARD_BULLETED_OFF_OUTLINE	mdi2c-card-bulleted-off-outline
    170	CARD_BULLETED_OUTLINE	mdi2c-card-маркированный-контур
    171	CARD_BULLETED_SETTINGS	mdi2c-card-маркированные-настройки
    172	CARD_BULLETED_SETTINGS_OUTLINE	mdi2c-card-bulleted-settings-outline
    173	КАРТА_МИНУС	mdi2c-card-минус
    174	CARD_MINUS_OUTLINE	mdi2c-card-minus-outline
    175	CARD_OFF	mdi2c-card-off
    176	CARD_OFF_OUTLINE	mdi2c-card-off-outline
    177	CARD_OUTLINE	mdi2c-card-outline
    178	КАРТА_ПЛЮС	mdi2c-card-plus
    179	CARD_PLUS_OUTLINE	mdi2c-card-plus-outline
    180	CARD_REMOVE	mdi2c-card-remove
    181	CARD_REMOVE_OUTLINE	mdi2c-card-remove-outline
    182	CARD_SEARCH	mdi2c-card-search
    183	CARD_SEARCH_OUTLINE	mdi2c-card-search-outline
    184	CARD_TEXT	mdi2c-карта-текст
    185	CARD_TEXT_OUTLINE	mdi2c-card-text-outline
    186	КАРТЫ	карты mdi2c
    187	КАРТЫ_КЛУБА	mdi2c-cards-club
    188	КАРТЫ_АЛМАЗ	mdi2c-cards-diamond
    189	КАРТЫ_DIAMOND_OUTLINE	mdi2c-cards-diamond-outline
    190	КАРТЫ_СЕРДЦЕ	mdi2c-карты-сердце
    191	CARDS_OUTLINE	mdi2c-карты-контур
    192	КАРТЫ_PLAYING_OUTLINE	mdi2c-cards-playing-outline
    193	КАРТЫ_SPADE	mdi2c-cards-spade
    194	КАРТЫ_ВАРИАНТ	Вариант карты mdi2c
    195	МОРКОВЬ	mdi2c-морковь
    196	КОРЗИНА	mdi2c-тележка
    197	КОРЗИНА_СТРЕЛКА_ВНИЗ	mdi2c-тележка-стрелка вниз
    198	CART_ARROW_RIGHT	mdi2c-тележка-стрелка-вправо
    199	CART_ARROW_UP	mdi2c-тележка-стрелка вверх
    200	CART_CHECK	mdi2c-cart-check
    201	КОРЗИНА_МИНУС	mdi2c-тележка-минус
    202	КОРЗИНА_ВЫКЛ	mdi2c-тележка
    203	КОРЗИНА_OUTLINE	mdi2c-cart-outline
    204	ТЕЛЕЖКА_ПЛЮС	mdi2c-cart-plus
    205	КОРЗИНА_УДАЛИТЬ	mdi2c-cart-remove
    206	ВАРИАНТ ТЕЛЕЖКИ	mdi2c-тележка-вариант
    207	CASE_SENSITIVE_ALT	mdi2c-с учетом регистра-альт
    208	НАЛИЧНЫЕ	mdi2c-наличные
    209	НАЛИЧНЫЕ_100	mdi2c-cash-100
    210	НАЛИЧНЫЙ_ЧЕК	mdi2c-кассовый чек
    211	CASH_LOCK	mdi2c-денежный замок
    212	CASH_LOCK_OPEN	mdi2c-cash-lock-open
    213	CASH_MARKER	mdi2c-кассовый маркер
    214	НАЛИЧНЫЕ_МИНУС	mdi2c-наличные минус
    215	CASH_MULTIPLE	mdi2c-наличные несколько
    216	НАЛИЧНЫЕ_ПЛЮС	mdi2c-cash-plus
    217	НАЛИЧНЫЕ_ВОЗВРАТ	mdi2c-возврат наличных
    218	КАССОВЫЙ РЕГИСТР	mdi2c-касса
    219	CASH_REMOVE	mdi2c-наличные-удалить
    220	НАЛИЧНЫЕ_Долл. США	mdi2c-наличные доллары США
    221	CASH_USD_OUTLINE	mdi2c-наличные доллары-наброски
    222	КАССЕТА	mdi2c-кассета
    223	ЛИТОЕ	mdi2c-cast
    224	CAST_AUDIO	mdi2c-cast-аудио
    225	CAST_CONNECTED	mdi2c-cast-соединение
    226	CAST_EDUCATION	mdi2c-cast-образование
    227	CAST_OFF	mdi2c-сброс
    228	ЗАМОК	mdi2c-замок
    229	CAT	mdi2c-cat
    230	Видеонаблюдение	mdi2c-cctv
    231	ПОТОЛОЧНЫЙ СВЕТ	mdi2c-потолочный светильник
    232	СОТОВЫЙ ТЕЛЕФОН	mdi2c-мобильный телефон
    233	СОТОВЫЙ ТЕЛЕФОН_ANDROID	mdi2c-сотовый телефон-андроид
    234	МОБИЛЬНЫЙ ТЕЛЕФОН_СТРЕЛКА ВНИЗ	mdi2c-сотовый телефон-стрелка вниз
    235	СОТОВЫЙ ТЕЛЕФОН_БАЗОВЫЙ	mdi2c-сотовый телефон-базовый
    236	ЗАРЯДКА СОТОВОГО ТЕЛЕФОНА	mdi2c-зарядка мобильного телефона
    237	CELLPHONE_COG	mdi2c-сотовый телефон-ког
    238	МОБИЛЬНЫЙ ТЕЛЕФОН_ДОК	mdi2c-док-станция для мобильного телефона
    239	УДАЛЕНИЕ СОТОВОГО ТЕЛЕФОНА	mdi2c-удаление мобильного телефона
    240	ИНФОРМАЦИЯ О СОТОВОМ ТЕЛЕФОНЕ	mdi2c-информация о мобильном телефоне
    241	СОТОВЫЙ ТЕЛЕФОН_IPPHONE	mdi2c-сотовый телефон-iphone
    242	CELLPHONE_KEY	mdi2c-ключ мобильного телефона
    243	СОТОВОЙ ТЕЛЕФОН_LINK	mdi2c-сотовый телефон
    244	МОБИЛЬНЫЙ ТЕЛЕФОН_LINK_OFF	mdi2c-сотовый телефон-отключение
    245	МОБИЛЬНЫЙ_БЛОКИРОВКА	mdi2c-блокировка мобильного телефона
    246	CELLPHONE_MESSAGE	mdi2c-мобильное-сообщение
    247	CELLPHONE_MESSAGE_OFF	mdi2c-сотовый телефон-отключение сообщения
    248	МОБИЛЬНЫЙ ТЕЛЕФОН_NFC	mdi2c-сотовый телефон-nfc
    249	МОБИЛЬНЫЙ ТЕЛЕФОН_NFC_OFF	mdi2c-сотовый телефон-nfc-выкл
    250	МОБИЛЬНЫЙ ТЕЛЕФОН_ВЫКЛ.	mdi2c-отключение мобильного телефона
    251	МОБИЛЬНЫЙ ТЕЛЕФОН_PLAY	mdi2c-сотовый телефон-игра
    252	СКРИНШОТ СОТОВОГО ТЕЛЕФОНА	mdi2c-мобильный телефон-скриншот
    253	НАСТРОЙКИ СОТОВОГО ТЕЛЕФОНА	mdi2c-настройки мобильного телефона
    254	МОБИЛЬНЫЙ ТЕЛЕФОН_ЗВУК	mdi2c-звук мобильного телефона
    255	СОТОВЫЙ_ТЕКСТ	mdi2c-сотовый телефон-текст
    256	СОТОВЫЙ_БЕСПРОВОДНОЙ	mdi2c-сотовый телефон-беспроводная связь
    257	CELTIC_CROSS	mdi2c-кельтский крест
    258	ЦЕНТОС	mdi2c-центос
    259	СЕРТИФИКАТ	mdi2c-сертификат
    260	CERTIFICATE_OUTLINE	mdi2c-сертификат-схема
    261	СТУЛ_РОЛЛИНГ	mdi2c-качалка
    262	КАФЕДРА_ШКОЛА	mdi2c-chair-school
    263	БЛАГОТВОРИТЕЛЬНОСТЬ	mdi2c-благотворительность
    264	CHART_ARC	mdi2c-диаграмма-дуга
    265	CHART_AREASPLINE	mdi2c-диаграмма-площадь-сплайн
    266	CHART_AREASPLINE_VARIANT	mdi2c-диаграмма-площадь-сплайн-вариант
    267	ДИАГРАММА_BAR	mdi2c-диаграмма-бар
    268	CHART_BAR_STACKED	mdi2c-диаграмма с накоплением
    269	CHART_BELL_CURVE	mdi2c-диаграмма-колокол-кривая
    270	CHART_BELL_CURVE_CUMULATIVE	mdi2c-chart-bell-curve-cumulative
    271	ДИАГРАММА_BOX	mdi2c-chart-box
    272	CHART_BOX_OUTLINE	mdi2c-chart-box-outline
    273	CHART_BOX_PLUS_OUTLINE	mdi2c-chart-box-plus-outline
    274	ДИАГРАММА_БУББЛ	mdi2c-диаграмма-пузырь
    275	CHART_DONUT	mdi2c-диаграмма-пончик
    276	CHART_DONUT_VARIANT	mdi2c-диаграмма-бублик-вариант
    277	ДИАГРАММА_ГАНТА	mdi2c-диаграмма-Ганта
    278	ДИАГРАММА_ГИСТОГРАММА	mdi2c-диаграмма-гистограмма
    279	ДИАГРАММА_LINE	mdi2c-chart-line
    280	CHART_LINE_STACKED	mdi2c-chart-line-stacked
    281	CHART_LINE_VARIANT	mdi2c-диаграмма-строка-вариант
    282	CHART_MULTILINE	mdi2c-диаграмма-многострочная
    283	CHART_MULTIPLE	mdi2c-диаграмма-несколько
    284	СХЕМА ДИАГРАММЫ	круговая диаграмма mdi2c
    285	CHART_PPF	mdi2c-диаграмма-ppf
    286	CHART_SANKEY	mdi2c-диаграмма-санки
    287	CHART_SANKEY_VARIANT	mdi2c-chart-sankey-вариант
    288	ДИАГРАММА_SCATTER_PLOT	mdi2c-диаграмма рассеяния
    289	CHART_SCATTER_PLOT_HEXBIN	mdi2c-диаграмма-рассеяния-гексбин
    290	CHART_TIMELINE	mdi2c-диаграмма-временная шкала
    291	CHART_TIMELINE_VARIANT	mdi2c-диаграмма-вариант временной шкалы
    292	CHART_TIMELINE_VARIANT_SHIMMER	mdi2c-chart-временная шкала-вариант-мерцание
    293	CHART_TREE	дерево диаграмм mdi2c
    294	ЧАТ	mdi2c-чат
    295	CHAT_ALERT	mdi2c-чат-оповещение
    296	ЧАТ_ALERT_OUTLINE	mdi2c-чат-предупреждение-схема
    297	ЧАТ_МИНУС	mdi2c-чат-минус
    298	ЧАТ_МИНУС_OUTLINE	mdi2c-чат-минус-схема
    299	ЧАТ_OUTLINE	mdi2c-чат-схема
    300	ЧАТ_ПЛЮС	mdi2c-чат плюс
    301	CHAT_PLUS_OUTLINE	mdi2c-chat-plus-контур
    302	ЧАТ_ОБРАБОТКА	mdi2c-чат-обработка
    303	CHAT_PROCESSING_OUTLINE	mdi2c-chat-processing-outline
    304	ЧАТ_УДАЛИТЬ	mdi2c-чат-удалить
    305	ЧАТ_REMOVE_OUTLINE	mdi2c-chat-remove-outline
    306	ЧАТ_СОН	mdi2c-чат-сон
    307	ЧАТ_SLEEP_OUTLINE	mdi2c-chat-sleep-outline
    308	ЧЕК	mdi2c-check
    309	ПРОВЕРИТЬ ВСЕ	mdi2c-проверить все
    310	CHECK_BOLD	mdi2c-check-жирный
    311	CHECK_BOX_MULTIPLE_OUTLINE	mdi2c-check-box-multiple-outline
    312	CHECK_BOX_OUTLINE	mdi2c-флажок-схема
    313	CHECK_CIRCLE	mdi2c-проверочный круг
    314	CHECK_CIRCLE_OUTLINE	mdi2c-check-circle-outline
    315	CHECK_DECAGRAM	mdi2c-check-декаграмма
    316	ПРОВЕРКА_СЕТИ	mdi2c-проверить-сеть
    317	CHECK_NETWORK_OUTLINE	mdi2c-check-network-outline
    318	CHECK_OUTLINE	mdi2c-check-outline
    319	CHECK_UNDERLINE	mdi2c-check-подчеркивание
    320	CHECK_UNDERLINE_CIRCLE	mdi2c-проверить-подчеркнутый-круг
    321	CHECK_UNDERLINE_CIRCLE_OUTLINE	mdi2c-check-underline-circle-outline
    322	ЧЕКОВАЯ КНИЖКА	mdi2c-чековая книжка
    323	ПРОВЕРКА_ПУСТО	mdi2c-флажок-пусто
    324	CHECKBOX_BLANK_CIRCLE	mdi2c-checkbox-blank-circle
    325	CHECKBOX_BLANK_CIRCLE_OUTLINE	mdi2c-checkbox-blank-circle-outline
    326	ПРОВЕРКА_ПУСТО_ВЫКЛ	mdi2c-checkbox-blank-off
    327	CHECKBOX_BLANK_OFF_OUTLINE	mdi2c-checkbox-blank-off-outline
    328	CHECKBOX_BLANK_OUTLINE	mdi2c-checkbox-blank-outline
    329	КОНТРОЛЬ_ПРОМЕЖУТОЧНЫЙ	mdi2c-флажок-промежуточный
    330	Флажок_MARKED	mdi2c-checkbox-marked
    331	CHECKBOX_MARKED_CIRCLE	mdi2c-checkbox-marked-circle
    332	CHECKBOX_MARKED_CIRCLE_OUTLINE	mdi2c-checkbox-marked-circle-outline
    333	CHECKBOX_MARKED_OUTLINE	mdi2c-checkbox-marked-outline
    334	CHECKBOX_MULTIPLE_BLANK	mdi2c-флажок-несколько пустых
    335	CHECKBOX_MULTIPLE_BLANK_CIRCLE	mdi2c-checkbox-multiple-blank-circle
    336	CHECKBOX_MULTIPLE_BLANK_CIRCLE_OUTLINE	mdi2c-checkbox-multiple-blank-circle-outline
    337	CHECKBOX_MULTIPLE_BLANK_OUTLINE	mdi2c-checkbox-multiple-blank-outline
    338	ПРОВЕРКА_MULTIPLE_MARKED	mdi2c-checkbox-multi-marked
    339	CHECKBOX_MULTIPLE_MARKED_CIRCLE	mdi2c-checkbox-multiple-marked-circle
    340	CHECKBOX_MULTIPLE_MARKED_CIRCLE_OUTLINE	mdi2c-checkbox-multiple-marked-circle-outline
    341	CHECKBOX_MULTIPLE_MARKED_OUTLINE	mdi2c-checkbox-multiple-marked-outline
    342	ШАХМАТНАЯ ДОСКА	mdi2c-шахматная доска
    343	CHECKERBOARD_MINUS	mdi2c-шахматная-минус
    344	CHECKERBOARD_PLUS	mdi2c-шахматная доска плюс
    345	CHECKERBOARD_REMOVE	mdi2c-шахматная-удалить
    346	СЫР	mdi2c-сыр
    347	СЫР_ВЫКЛ	mdi2c-cheese-off
    348	CHEF_HAT	mdi2c-поварской колпак
    349	ХИМИЧЕСКОЕ ОРУЖИЕ	mdi2c-химическое оружие
    350	CHESS_BISHOP	mdi2c-chess-bishop
    351	CHESS_KING	mdi2c-шахматный король
    352	ШАХМАТНЫЙ РЫЦАРЬ	mdi2c-шахматный конь
    353	ШАХМАТНАЯ_ПЕШКА	mdi2c-шахматная пешка
    354	ШАХМАТНАЯ_КОРОЛЕВА	mdi2c-шахматная королева
    355	ШАХМАТНАЯ ЛАДЬЯ	mdi2c-шахматная ладья
    356	CHEVRON_DOUBLE_DOWN	mdi2c-шеврон-двойной вниз
    357	CHEVRON_DOUBLE_LEFT	mdi2c-шеврон-двойной левый
    358	ШЕВРОН_ДВОЙНОЙ_ПРАВЫЙ	mdi2c-шеврон-двойной правый
    359	CHEVRON_DOUBLE_UP	mdi2c-chevron-double-up
    360	ШЕВРОН_ВНИЗ	mdi2c-шеврон вниз
    361	CHEVRON_DOWN_BOX	mdi2c-шеврон-нижняя коробка
    362	CHEVRON_DOWN_BOX_OUTLINE	mdi2c-chevron-down-box-outline
    363	ШЕВРОН_ВНИЗ_ОКРУГ	mdi2c-chevron-down-circle
    364	CHEVRON_DOWN_CIRCLE_OUTLINE	mdi2c-chevron-down-circle-outline
    365	ШЕВРОН_ЛЕВЫЙ	mdi2c-шеврон-левый
    366	CHEVRON_LEFT_BOX	mdi2c-шеврон-левый ящик
    367	CHEVRON_LEFT_BOX_OUTLINE	mdi2c-chevron-left-box-outline
    368	ШЕВРОН_LEFT_CIRCLE	mdi2c-шеврон-левый круг
    369	CHEVRON_LEFT_CIRCLE_OUTLINE	mdi2c-chevron-left-circle-outline
    370	ШЕВРОН_ПРАВЫЙ	mdi2c-шеврон-правый
    371	CHEVRON_RIGHT_BOX	mdi2c-chevron-right-box
    372	CHEVRON_RIGHT_BOX_OUTLINE	mdi2c-chevron-right-box-контур
    373	CHEVRON_RIGHT_CIRCLE	mdi2c-chevron-right-circle
    374	CHEVRON_RIGHT_CIRCLE_OUTLINE	mdi2c-chevron-right-circle-outline
    375	CHEVRON_TRIPLE_DOWN	mdi2c-chevron-triple-down
    376	ШЕВРОН_ТРОЙНОЙ_ЛЕВЫЙ	mdi2c-шеврон-тройной левый
    377	ШЕВРОН_ТРОЙНОЙ_ПРАВЫЙ	mdi2c-шеврон-тройной правый
    378	CHEVRON_TRIPLE_UP	mdi2c-chevron-triple-up
    379	ШЕВРОН_УП	mdi2c-chevron-up
    380	ШЕВРОН_UP_BOX	mdi2c-chevron-up-box
    381	CHEVRON_UP_BOX_OUTLINE	mdi2c-chevron-up-box-outline
    382	CHEVRON_UP_CIRCLE	mdi2c-chevron-up-circle
    383	CHEVRON_UP_CIRCLE_OUTLINE	mdi2c-chevron-up-circle-outline
    384	ЧИЛИ_ГОРЯЧИЙ	mdi2c-чили-острый
    385	ЧИЛИ_СРЕДНИЙ	mdi2c-chili-medium
    386	ЧИЛИ_МИЛД	mdi2c-чили-мягкий
    387	ЧИЛИ_ВЫКЛ	mdi2c-chili-off
    388	ЧИП	mdi2c-чип
    389	ХРИСТИАНСТВО	mdi2c-христианство
    390	КРИСТИАНТИ_OUTLINE	mdi2c-христианство-схема
    391	ЦЕРКОВЬ	mdi2c-church
    392	СИГАРА	mdi2c-cigar
    393	CIGAR_OFF	mdi2c-отключение сигарет
    394	КРУГ	mdi2c-круг
    395	CIRCLE_BOX	mdi2c-круглая коробка
    396	CIRCLE_BOX_OUTLINE	mdi2c-circle-box-outline
    397	CIRCLE_DOUBLE	mdi2c-круг-двойной
    398	CIRCLE_EDIT_OUTLINE	mdi2c-circle-edit-outline
    399	CIRCLE_EXPAND	mdi2c-круг-расширить
    400	CIRCLE_HALF	mdi2c-круг-половина
    401	CIRCLE_HALF_FULL	mdi2c-круг-полуполный
    402	CIRCLE_MEDIUM	mdi2c-круг-средний
    403	CIRCLE_MULTIPLE	mdi2c-круг-несколько
    404	CIRCLE_MULTIPLE_OUTLINE	mdi2c-circle-multiple-outline
    405	CIRCLE_OFF_OUTLINE	mdi2c-circle-off-outline
    406	CIRCLE_OUTLINE	mdi2c-круг-контур
    407	CIRCLE_SLICE_1	mdi2c-circle-slice-1
    408	CIRCLE_SLICE_2	mdi2c-circle-slice-2
    409	CIRCLE_SLICE_3	mdi2c-circle-slice-3
    410	CIRCLE_SLICE_4	mdi2c-circle-slice-4
    411	CIRCLE_SLICE_5	mdi2c-circle-slice-5
    412	CIRCLE_SLICE_6	mdi2c-circle-slice-6
    413	CIRCLE_SLICE_7	mdi2c-circle-slice-7
    414	CIRCLE_SLICE_8	mdi2c-circle-slice-8
    415	CIRCLE_SMALL	mdi2c-круг-маленький
    416	ДИСКОВАЯ ПИЛА	mdi2c-циркулярная пила
    417	ГОРОД	mdi2c-город
    418	ГОРОД_ВАРИАНТ	mdi2c-город-вариант
    419	ГОРОД_ВАРИАНТ_OUTLINE	mdi2c-city-вариант-схема
    420	БУФЕР ОБМЕНА	mdi2c-буфер обмена
    421	БУФЕР ОБМЕНА АККАУНТА	mdi2c-буфер обмена-учетная запись
    422	CLIPBOARD_ACCOUNT_OUTLINE	mdi2c-clipboard-account-outline
    423	БУФЕР ОБМЕНА_ALERT	mdi2c-буфер обмена оповещения
    424	CLIPBOARD_ALERT_OUTLINE	mdi2c-clipboard-alert-outline
    425	CLIPBOARD_ARROW_DOWN	mdi2c-буфер обмена стрелка вниз
    426	CLIPBOARD_ARROW_DOWN_OUTLINE	mdi2c-буфер обмена-стрелка-вниз-контур
    427	CLIPBOARD_ARROW_LEFT	mdi2c-буфер обмена стрелка-влево
    428	CLIPBOARD_ARROW_LEFT_OUTLINE	mdi2c-буфер обмена-стрелка-влево-контур
    429	CLIPBOARD_ARROW_RIGHT	mdi2c-буфер обмена стрелка вправо
    430	CLIPBOARD_ARROW_RIGHT_OUTLINE	mdi2c-буфер обмена-стрелка-вправо-контур
    431	CLIPBOARD_ARROW_UP	mdi2c-буфер обмена стрелка вверх
    432	CLIPBOARD_ARROW_UP_OUTLINE	mdi2c-буфер обмена стрелка вверх-контур
    433	ПРОВЕРКА БУФЕРА ОБМЕНА	mdi2c-проверка буфера обмена
    434	CLIPBOARD_CHECK_MULTIPLE	mdi2c-clipboard-check-multiple
    435	CLIPBOARD_CHECK_MULTIPLE_OUTLINE	mdi2c-clipboard-check-multiple-outline
    436	CLIPBOARD_CHECK_OUTLINE	mdi2c-clipboard-check-outline
    437	БУФЕР ОБМЕНА_РЕДАКТИРОВАНИЕ	mdi2c-буфер обмена
    438	CLIPBOARD_EDIT_OUTLINE	mdi2c-clipboard-edit-outline
    439	БУФЕР_ОБМЕНА_ФАЙЛА	mdi2c-файл буфера обмена
    440	CLIPBOARD_FILE_OUTLINE	mdi2c-буфер обмена-файл-схема
    441	БУФЕР_ОБМЕНА	mdi2c-буфер обмена
    442	CLIPBOARD_FLOW_OUTLINE	mdi2c-clipboard-flow-outline
    443	СПИСОК ОБМЕНА ОБМЕНА	mdi2c-список-буфера-буфера
    444	CLIPBOARD_LIST_OUTLINE	mdi2c-буфер обмена-список-контур
    445	БУФЕР ОБМЕНА_МИНУС	mdi2c-буфер обмена минус
    446	CLIPBOARD_MINUS_OUTLINE	mdi2c-буфер обмена минус план
    447	БУФЕР ОБМЕНА_НЕСКОЛЬКО	mdi2c-буфер обмена-несколько
    448	CLIPBOARD_MULTIPLE_OUTLINE	mdi2c-буфер обмена-множественный контур
    449	БУФЕР ОБМЕНА_ВЫКЛ	mdi2c-буфер обмена выключен
    450	CLIPBOARD_OFF_OUTLINE	mdi2c-буфер обмена вне контура
    451	БУФЕР ОБМЕНА_OUTLINE	mdi2c-буфер обмена
    452	БУФЕР ОБМЕНА	mdi2c-буфер обмена
    453	CLIPBOARD_PLAY_MULTIPLE	mdi2c-clipboard-play-multiple
    454	CLIPBOARD_PLAY_MULTIPLE_OUTLINE	mdi2c-clipboard-play-multiple-outline
    455	CLIPBOARD_PLAY_OUTLINE	mdi2c-clipboard-play-outline
    456	БУФЕР ОБМЕНА_ПЛЮС	mdi2c-буфер обмена плюс
    457	CLIPBOARD_PLUS_OUTLINE	mdi2c-буфер обмена плюс контур
    458	ИМПУЛЬС ОБМЕНА ОБМЕНА	mdi2c-буфер обмена импульс
    459	CLIPBOARD_PULSE_OUTLINE	mdi2c-clipboard-pulse-outline
    460	БУФЕР ОБМЕНА_УДАЛИТЬ	mdi2c-буфер обмена-удалить
    461	CLIPBOARD_REMOVE_OUTLINE	mdi2c-буфер обмена-удалить-контур
    462	БУФЕР_ПОИСКА	mdi2c-буфер обмена поиск
    463	CLIPBOARD_SEARCH_OUTLINE	mdi2c-буфер обмена-поиск-схема
    464	БУФЕР ОБМЕНА_ТЕКСТ	mdi2c-буфер обмена текст
    465	CLIPBOARD_TEXT_MULTIPLE	mdi2c-буфер обмена текст-несколько
    466	CLIPBOARD_TEXT_MULTIPLE_OUTLINE	mdi2c-clipboard-text-multiple-outline
    467	БУФЕР ОБМЕНА_ТЕКСТ_ВЫКЛ	mdi2c-clipboard-text-off
    468	CLIPBOARD_TEXT_OFF_OUTLINE	mdi2c-clipboard-text-off-outline
    469	CLIPBOARD_TEXT_OUTLINE	mdi2c-буфер обмена текстовый контур
    470	CLIPBOARD_TEXT_PLAY	mdi2c-буфер обмена текстовое воспроизведение
    471	CLIPBOARD_TEXT_PLAY_OUTLINE	mdi2c-clipboard-text-play-outline
    472	CLIPBOARD_TEXT_SEARCH	mdi2c-буфер обмена текстовый поиск
    473	CLIPBOARD_TEXT_SEARCH_OUTLINE	mdi2c-clipboard-text-search-outline
    474	КЛИППИ	mdi2c-клиппи
    475	ЧАСЫ	mdi2c-часы
    476	CLOCK_ALERT	mdi2c-будильник-предупреждение
    477	CLOCK_ALERT_OUTLINE	mdi2c-часы-предупреждение-схема
    478	ПРОВЕРКА ЧАСОВ	mdi2c-проверка часов
    479	CLOCK_CHECK_OUTLINE	mdi2c-часы-проверка-схема
    480	ЧАСЫ_ЦИФРОВЫЕ	mdi2c-часы-цифровые
    481	ЧАСЫ_END	mdi2c-часы-конец
    482	CLOCK_FAST	mdi2c-быстро
    483	CLOCK_IN	mdi2c-часы
    484	ЧАСЫ	mdi2c-часы ожидания
    485	CLOCK_OUTLINE	mdi2c-часы-схема
    486	CLOCK_START	mdi2c-часы-старт
    487	ЧАСЫ_ВРЕМЯ_ВОСЕМЬ	mdi2c-часы-время-восемь
    488	CLOCK_TIME_EIGHT_OUTLINE	mdi2c-часы-время-восемь-контур
    489	CLOCK_TIME_ELEVEN	mdi2c-часы-время-одиннадцать
    490	CLOCK_TIME_ELEVEN_OUTLINE	mdi2c-часы-время-одиннадцать-контур
    491	CLOCK_TIME_FIVE	mdi2c-часы-время-пять
    492	CLOCK_TIME_FIVE_OUTLINE	mdi2c-часы-время-пять-контур
    493	CLOCK_TIME_FOUR	mdi2c-часы-время-четыре
    494	ЧАСЫ_TIME_FOUR_OUTLINE	mdi2c-часы-время-четыре контура
    495	ЧАСЫ_ВРЕМЯ_ДЕВЯТЬ	mdi2c-часы-время-девять
    496	CLOCK_TIME_NINE_OUTLINE	mdi2c-часы-время-девять-контур
    497	CLOCK_TIME_ONE	mdi2c-часы-время-один
    498	CLOCK_TIME_ONE_OUTLINE	mdi2c-часы-время-один-контур
    499	CLOCK_TIME_SEVEN	mdi2c-часы-время-семь
    500	CLOCK_TIME_SEVEN_OUTLINE	mdi2c-часы-время-семь-контур
    501	ЧАСЫ_TIME_SIX	mdi2c-часы-время-шесть
    502	CLOCK_TIME_SIX_OUTLINE	mdi2c-часы-время-шесть-схема
    503	CLOCK_TIME_TEN	mdi2c-часы-время-десять
    504	CLOCK_TIME_TEN_OUTLINE	mdi2c-часы-время-десять-контур
    505	CLOCK_TIME_THREE	mdi2c-часы-время-три
    506	CLOCK_TIME_THREE_OUTLINE	mdi2c-часы-время-три-контур
    507	ЧАСЫ_ВРЕМЯ_ДВЕНАДЦАТЬ	mdi2c-часы-время-двенадцать
    508	CLOCK_TIME_TWELVE_OUTLINE	mdi2c-часы-время-двенадцать-схема
    509	ЧАСЫ_ВРЕМЯ_ДВА	mdi2c-часы-время-два
    510	CLOCK_TIME_TWO_OUTLINE	mdi2c-часы-время-два-контур
    511	ЗАКРЫТЬ	mdi2c-закрыть
    512	CLOSE_BOX	mdi2c-close-box
    513	CLOSE_BOX_MULTIPLE	mdi2c-close-box-multiple
    514	CLOSE_BOX_MULTIPLE_OUTLINE	mdi2c-close-box-multiple-outline
    515	CLOSE_BOX_OUTLINE	mdi2c-close-box-контур
    516	ЗАКРЫТЬ_ОКРУГ	mdi2c-близкий круг
    517	CLOSE_CIRCLE_MULTIPLE	mdi2c-close-circle-multiple
    518	CLOSE_CIRCLE_MULTIPLE_OUTLINE	mdi2c-close-circle-multiple-outline
    519	CLOSE_CIRCLE_OUTLINE	mdi2c-close-circle-outline
    520	ЗАКРЫТАЯ_СЕТЬ	mdi2c-близкая сеть
    521	CLOSE_NETWORK_OUTLINE	mdi2c-близкая-сетевая-схема
    522	ЗАКРЫТЫЙ ВОСЬМИУГОЛЬНИК	mdi2c-близкий восьмиугольник
    523	CLOSE_OCTAGON_OUTLINE	mdi2c-close-octagon-outline
    524	CLOSE_OUTLINE	mdi2c-закрыть контур
    525	ЗАКРЫТЫЙ_ТОЛЩИЙ	mdi2c-близкая-толстая
    526	CLOSED_CAPTION	mdi2c-закрытые субтитры
    527	CLOSED_CAPTION_OUTLINE	mdi2c-closed-caption-контур
    528	ОБЛАКО	mdi2c-cloud
    529	ОБЛАЧНОЕ ПРЕДУПРЕЖДЕНИЕ	mdi2c-облачное оповещение
    530	CLOUD_BRACES	mdi2c-cloud-braces
    531	ОБЛАЧНАЯ ПРОВЕРКА	mdi2c-cloud-check
    532	CLOUD_CHECK_OUTLINE	mdi2c-cloud-check-outline
    533	ОБЛАКО_КРУГ	mdi2c-cloud-circle
    534	CLOUD_DOWNLOAD	mdi2c-cloud-загрузка
    535	CLOUD_DOWNLOAD_OUTLINE	mdi2c-cloud-download-схема
    536	ОБЛАЧНАЯ БЛОКИРОВКА	mdi2c-cloud-lock
    537	CLOUD_LOCK_OUTLINE	mdi2c-cloud-lock-outline
    538	CLOUD_OFF_OUTLINE	mdi2c-cloud-off-outline
    539	ОБЛАКО_OUTLINE	mdi2c-cloud-outline
    540	ОБЛАЧНАЯ ПЕЧАТЬ	mdi2c-cloud-print
    541	CLOUD_PRINT_OUTLINE	mdi2c-cloud-print-outline
    542	ОБЛАКО_ВОПРОС	mdi2c-cloud-вопрос
    543	ОБЛАКО_ОБНОВЛЕНИЕ	mdi2c-cloud-refresh
    544	ОБЛАЧНЫЙ_ПОИСК	mdi2c-облачный поиск
    545	CLOUD_SEARCH_OUTLINE	mdi2c-cloud-search-outline
    546	CLOUD_SYNC	mdi2c-облачная синхронизация
    547	CLOUD_SYNC_OUTLINE	mdi2c-cloud-sync-схема
    548	ОБЛАЧНЫЕ ТЭГИ	mdi2c-облачные теги
    549	ОБЛАЧНАЯ ЗАГРУЗКА	mdi2c-cloud-upload
    550	CLOUD_UPLOAD_OUTLINE	mdi2c-cloud-upload-outline
    551	КЛЕВЕР	mdi2c-клевер
    552	COACH_LAMP	mdi2c-фара для автобусов
    553	ПАЛЬТО_ВЕШАЛКА	mdi2c-вешалка
    554	КОД_МАССИВ	mdi2c-кодовый массив
    555	CODE_BRACES	mdi2c-кодовые скобки
    556	CODE_BRACES_BOX	mdi2c-code-braces-box
    557	КОД_СКОБКИ	mdi2c-кодовые скобки
    558	КОД_РАВЕН	mdi2c-равный коду
    559	КОД_БОЛЬШИЙ_ЧЕМ	mdi2c-код больше
    560	CODE_GREATER_THAN_OR_EQUAL	mdi2c-код-больше или равно
    561	КОД_JSON	mdi2c-код-json
    562	КОД_МЕНЬШЕ	mdi2c-код меньше
    563	CODE_LESS_THAN_OR_EQUAL	mdi2c-код меньше или равно
    564	КОД_НЕ РАВНО	mdi2c-код не равен
    565	КОД_НЕ РАВНЫЙ_ВАРИАНТ	mdi2c-код-неравный вариант
    566	КОД_СКОБКИ	mdi2c-код-круглые скобки
    567	CODE_PARENTHESES_BOX	mdi2c-code-parentes-box
    568	КОД_СТРОКА	mdi2c-кодовая строка
    569	CODE_TAGS	mdi2c-кодовые теги
    570	CODE_TAGS_CHECK	mdi2c-code-tags-check
    571	КОДЭПЕН	mdi2c-codepen
    572	КОФЕ	mdi2c-кофе
    573	КОФЕВАРКА	mdi2c-кофеварка
    574	КОФЕ_ВЫКЛ	mdi2c-кофе-офф
    575	КОФЕ_OFF_OUTLINE	mdi2c-кофе-офф-контур
    576	КОФЕ_OUTLINE	mdi2c-кофе-контур
    577	COFFEE_TO_GO	mdi2c-кофе на вынос
    578	COFFEE_TO_GO_OUTLINE	mdi2c-кофе на вынос
    579	Гроб	mdi2c-гроб
    580	ЦЕНТР	mdi2c-cog
    581	COG_BOX	mdi2c-cog-box
    582	COG_ЧАСОВАЯ СТРЕЛКА	mdi2c-cog по часовой
    583	COG_ПРОТИВ ЧАСОВОЙ СТРЕЛКИ	mdi2c-cog-против часовой стрелки
    584	COG_OFF	mdi2c-cog-off
    585	COG_OFF_OUTLINE	mdi2c-cog-off-контур
    586	COG_OUTLINE	mdi2c-cog-схема
    587	COG_REFRESH	mdi2c-cog-обновление
    588	COG_REFRESH_OUTLINE	mdi2c-cog-обновить-контур
    589	COG_SYNC	mdi2c-cog-синхронизация
    590	COG_SYNC_OUTLINE	mdi2c-cog-sync-схема
    591	COG_TRANSFER	mdi2c-cog-передача
    592	COG_TRANSFER_OUTLINE	mdi2c-cog-transfer-outline
    593	ПРОДАЖА	mdi2c-cogs
    594	КОЛЛАЖ	mdi2c-коллаж
    595	COLLAPSE_ALL	mdi2c-свернуть все
    596	COLLAPSE_ALL_OUTLINE	mdi2c-collapse-all-outline
    597	COLOR_HELPER	mdi2c-color-helper
    598	ЗАПЯТАЯ	mdi2c-запятая
    599	COMMA_BOX	mdi2c-запятая
    600	COMMA_BOX_OUTLINE	mdi2c-запятая-контур
    601	COMMA_CIRCLE	mdi2c-запятая-круг
    602	COMMA_CIRCLE_OUTLINE	mdi2c-запятая-круг-контур
    603	КОММЕНТАРИЙ	mdi2c-комментарий
    604	КОММЕНТАРИЙ_АККАУНТ	mdi2c-комментарий-аккаунт
    605	COMMENT_ACCOUNT_OUTLINE	mdi2c-comment-account-outline
    606	КОММЕНТАРИЙ_ПРЕДУПРЕЖДЕНИЕ	mdi2c-комментарий-оповещение
    607	COMMENT_ALERT_OUTLINE	mdi2c-comment-alert-outline
    608	COMMENT_ARROW_LEFT	mdi2c-комментарий-стрелка-влево
    609	COMMENT_ARROW_LEFT_OUTLINE	mdi2c-комментарий-стрелка-влево-контур
    610	COMMENT_ARROW_RIGHT	mdi2c-комментарий-стрелка-вправо
    611	COMMENT_ARROW_RIGHT_OUTLINE	mdi2c-комментарий-стрелка-вправо-контур
    612	КОММЕНТАРИЙ_ЗАКЛАДКА	mdi2c-комментарий-закладка
    613	COMMENT_BOOKMARK_OUTLINE	mdi2c-комментарий-закладка-схема
    614	КОММЕНТАРИЙ_ПРОВЕРКА	mdi2c-комментарий-проверка
    615	COMMENT_CHECK_OUTLINE	mdi2c-comment-check-outline
    616	КОММЕНТАРИЙ_РЕДАКТИРОВАТЬ	mdi2c-комментарий-редактирование
    617	COMMENT_EDIT_OUTLINE	mdi2c-комментарий-редактировать-контур
    618	КОММЕНТАРИЙ_ГЛАЗ	mdi2c-комментарий-глаз
    619	COMMENT_EYE_OUTLINE	mdi2c-comment-eye-outline
    620	КОММЕНТАРИЙ_FLASH	mdi2c-comment-flash
    621	COMMENT_FLASH_OUTLINE	mdi2c-comment-flash-outline
    622	КОММЕНТАРИЙ_МИНУС	mdi2c-комментарий-минус
    623	COMMENT_MINUS_OUTLINE	mdi2c-комментарий-минус-схема
    624	COMMENT_MULTIPLE	mdi2c-комментарий-несколько
    625	COMMENT_MULTIPLE_OUTLINE	mdi2c-comment-multiple-outline
    626	КОММЕНТАРИЙ_ВЫКЛ	mdi2c-comment-off
    627	COMMENT_OFF_OUTLINE	mdi2c-comment-off-outline
    628	COMMENT_OUTLINE	mdi2c-comment-outline
    629	КОММЕНТАРИЙ_ПЛЮС	mdi2c-комментарий-плюс
    630	COMMENT_PLUS_OUTLINE	mdi2c-comment-plus-outline
    631	КОММЕНТАРИЙ_ОБРАБОТКА	mdi2c-обработка комментариев
    632	COMMENT_PROCESSING_OUTLINE	mdi2c-обработка-комментариев-схема
    633	КОММЕНТАРИЙ_ВОПРОС	mdi2c-комментарий-вопрос
    634	COMMENT_QUESTION_OUTLINE	mdi2c-комментарий-вопрос-схема
    635	КОММЕНТАРИЙ_ЦИТАТА	mdi2c-комментарий-цитата
    636	COMMENT_QUOTE_OUTLINE	mdi2c-comment-quote-контур
    637	КОММЕНТАРИЙ_УДАЛИТЬ	mdi2c-комментарий-удалить
    638	COMMENT_REMOVE_OUTLINE	mdi2c-comment-remove-outline
    639	КОММЕНТАРИЙ_ПОИСК	mdi2c-комментарий-поиск
    640	COMMENT_SEARCH_OUTLINE	mdi2c-comment-search-outline
    641	КОММЕНТАРИЙ_ТЕКСТ	mdi2c-комментарий-текст
    642	COMMENT_TEXT_MULTIPLE	mdi2c-комментарий-текст-несколько
    643	COMMENT_TEXT_MULTIPLE_OUTLINE	mdi2c-comment-text-multiple-outline
    644	COMMENT_TEXT_OUTLINE	mdi2c-comment-text-outline
    645	СРАВНИТЬ	mdi2c-сравнить
    646	СРАВНЕНИЕ_ГОРИЗОНТАЛЬНЫЙ	mdi2c-сравнить-горизонтальный
    647	СРАВНЕНИЕ_ВЕРТИКАЛ	mdi2c-сравнить-вертикаль
    648	КОМПАС	mdi2c-компас
    649	COMPASS_OFF	mdi2c-компас выключен
    650	COMPASS_OFF_OUTLINE	mdi2c-compass-off-outline
    651	COMPASS_OUTLINE	mdi2c-compass-outline
    652	COMPASS_ROSE	mdi2c-компас-роза
    653	КОНКУРС_КИ	mdi2c-concourse-ci
    654	СОЕДИНЕНИЕ	mdi2c-соединение
    655	КОНСОЛЬ	Консоль mdi2c
    656	CONSOLE_LINE	mdi2c-консоль-линия
    657	КОНСОЛЬНАЯ_СЕТЬ	mdi2c-консоль-сеть
    658	CONSOLE_NETWORK_OUTLINE	mdi2c-консоль-сеть-схема
    659	КОНСОЛИДАЦИЯ	mdi2c-консолидат
    660	БЕСКОНТАКТНАЯ ОПЛАТА	mdi2c-бесконтактная оплата
    661	CONTACTLESS_PAYMENT_CIRCLE	mdi2c-бесконтактный платежный круг
    662	CONTACTLESS_PAYMENT_CIRCLE_OUTLINE	mdi2c-contactless-pay-circle-outline
    663	КОНТАКТЫ	mdi2c-контакты
    664	КОНТАКТЫ_OUTLINE	mdi2c-контакты-схема
    665	СОДЕРЖИТ	mdi2c-содержащий
    666	CONTAIN_END	mdi2c-содержащий конец
    667	CONTAIN_START	mdi2c-контейнер-старт
    668	СОДЕРЖИМОЕ_КОПИЯ	mdi2c-контент-копия
    669	CONTENT_CUT	mdi2c-content-cut
    670	CONTENT_DUPLICATE	mdi2c-контент-дубликат
    671	CONTENT_PASTE	mdi2c-контент-паста
    672	СОДЕРЖИМОЕ_СОХРАНИТЬ	mdi2c-контент-сохранение
    673	CONTENT_SAVE_ALERT	mdi2c-контент-сохранение-предупреждение
    674	CONTENT_SAVE_ALERT_OUTLINE	mdi2c-content-save-alert-outline
    675	СОДЕРЖИМОЕ_СОХРАНИТЬ_ВСЕ	mdi2c-контент-сохранить-все
    676	CONTENT_SAVE_ALL_OUTLINE	mdi2c-content-save-all-outline
    677	CONTENT_SAVE_COG	mdi2c-контент-сохранение-ког
    678	CONTENT_SAVE_COG_OUTLINE	mdi2c-content-save-cog-outline
    679	СОДЕРЖИМОЕ_СОХРАНИТЬ_РЕДАКТИРОВАТЬ	mdi2c-контент-сохранение-редактирование
    680	CONTENT_SAVE_EDIT_OUTLINE	mdi2c-content-save-edit-outline
    681	CONTENT_SAVE_MOVE	mdi2c-контент-сохранение-перемещение
    682	CONTENT_SAVE_MOVE_OUTLINE	mdi2c-content-save-move-outline
    683	CONTENT_SAVE_OFF	mdi2c-контент-сохранение
    684	CONTENT_SAVE_OFF_OUTLINE	mdi2c-content-save-off-outline
    685	CONTENT_SAVE_OUTLINE	mdi2c-контент-сохранение-схема
    686	CONTENT_SAVE_SETTINGS	mdi2c-контент-сохранение-настройки
    687	CONTENT_SAVE_SETTINGS_OUTLINE	mdi2c-content-save-settings-outline
    688	КОНТРАСТ	mdi2c-контраст
    689	CONTRAST_BOX	mdi2c-контрастная коробка
    690	КОНТРАСТ_ОКРУГ	mdi2c-контрастный круг
    691	КОНТРОЛЛЕР_КЛАССИК	mdi2c-контроллер-классический
    692	КОНТРОЛЛЕР_CLASSIC_OUTLINE	mdi2c-controller-classic-схема
    693	ПЕЧЕНЬЕ	mdi2c-cookie
    694	COOKIE_ALERT	mdi2c-cookie-оповещение
    695	COOKIE_ALERT_OUTLINE	mdi2c-cookie-предупреждение-схема
    696	COOKIE_CHECK	mdi2c-cookie-check
    697	COOKIE_CHECK_OUTLINE	mdi2c-cookie-check-outline
    698	COOKIE_COG	mdi2c-cookie-cog
    699	COOKIE_COG_OUTLINE	mdi2c-cookie-cog-схема
    700	COOKIE_MINUS	mdi2c-cookie-минус
    701	COOKIE_MINUS_OUTLINE	mdi2c-cookie-минус-схема
    702	COOKIE_OUTLINE	mdi2c-cookie-схема
    703	COOKIE_PLUS	mdi2c-cookie-плюс
    704	COOKIE_PLUS_OUTLINE	mdi2c-cookie-plus-схема
    705	COOKIE_REMOVE	mdi2c-cookie-удалить
    706	COOKIE_REMOVE_OUTLINE	mdi2c-cookie-remove-outline
    707	COOKIE_SETTINGS	mdi2c-cookie-настройки
    708	COOKIE_SETTINGS_OUTLINE	mdi2c-cookie-настройки-схема
    709	ТЕМПЕРАТУРА ХЛАДАГЕНТА	mdi2c-температура охлаждающей жидкости
    710	АВТОРСКОЕ ПРАВО	mdi2c-авторское право
    711	КОРДОВА	mdi2c-кордова
    712	КУКУРУЗА	mdi2c-кукуруза
    713	КОЗЕРУ_ВЫКЛ	mdi2c-кукуруза
    714	КОСИНУС_ВОЛНА	mdi2c-косинусоидальная волна
    715	СЧЕТЧИК	mdi2c-счетчик
    716	КОРОВА	mdi2c-корова
    717	CPU_32_BIT	mdi2c-процессор-32-разрядный
    718	CPU_64_BIT	mdi2c-процессор-64-разрядный
    719	КРАН	mdi2c-кран
    720	СОЗДАНИЕ	создание mdi2c
    721	CREATIVE_COMMONS	mdi2c-творческое сообщество
    722	КРЕДИТНАЯ КАРТА	mdi2c-кредитная карта
    723	CREDIT_CARD_CHECK	mdi2c-проверка кредитной карты
    724	CREDIT_CARD_CHECK_OUTLINE	mdi2c-check-card-check-outline
    725	CREDIT_CARD_CLOCK	mdi2c-часы с кредитной картой
    726	CREDIT_CARD_CLOCK_OUTLINE	mdi2c-кредитная карта-часы-схема
    727	КРЕДИТНАЯ КАРТА_МАРКЕР	mdi2c-маркер кредитной карты
    728	CREDIT_CARD_MARKER_OUTLINE	mdi2c-finger-card-marker-outline
    729	КРЕДИТ_КАРТА_МИНУС	mdi2c-кредитная карта-минус
    730	CREDIT_CARD_MINUS_OUTLINE	mdi2c-кредитная карта минус контур
    731	CREDIT_CARD_MULTIPLE	mdi2c-несколько кредитных карт
    732	CREDIT_CARD_MULTIPLE_OUTLINE	mdi2c-credit-card-multiple-outline
    733	CREDIT_CARD_OFF	mdi2c-без кредитной карты
    734	CREDIT_CARD_OFF_OUTLINE	mdi2c-credit-card-off-outline
    735	CREDIT_CARD_OUTLINE	mdi2c-контур кредитной карты
    736	КРЕДИТНАЯ КАРТА_ПЛЮС	mdi2c-кредитная карта плюс
    737	CREDIT_CARD_PLUS_OUTLINE	mdi2c-credit-card-plus-outline
    738	CREDIT_CARD_REFRESH	mdi2c-обновление кредитной карты
    739	CREDIT_CARD_REFRESH_OUTLINE	mdi2c-cred-card-refresh-outline
    740	CREDIT_CARD_REFUND	mdi2c-возврат кредитной карты
    741	CREDIT_CARD_REFUND_OUTLINE	mdi2c-refund-card-refundoutline
    742	CREDIT_CARD_REMOVE	mdi2c-убрать кредитную карту
    743	CREDIT_CARD_REMOVE_OUTLINE	mdi2c-credit-card-remove-outline
    744	CREDIT_CARD_SCAN	mdi2c-сканирование кредитных карт
    745	CREDIT_CARD_SCAN_OUTLINE	mdi2c-cred-card-scan-outline
    746	CREDIT_CARD_SEARCH	mdi2c-поиск кредитных карт
    747	CREDIT_CARD_SEARCH_OUTLINE	mdi2c-find-card-search-outline
    748	НАСТРОЙКА КРЕДИТНОЙ КАРТЫ	mdi2c-настройки кредитной карты
    749	CREDIT_CARD_SETTINGS_OUTLINE	mdi2c-настройки-кредитной карты-схема
    750	CREDIT_CARD_SYNC	mdi2c-синхронизация кредитной карты
    751	CREDIT_CARD_SYNC_OUTLINE	mdi2c-credit-card-sync-outline
    752	КРЕДИТНАЯ_КАРТА_БЕСПРОВОДНАЯ	mdi2c-кредитная карта-беспроводная связь
    753	CREDIT_CARD_WIRELESS_OFF	mdi2c-кредитная карта-беспроводная связь
    754	CREDIT_CARD_WIRELESS_OFF_OUTLINE	mdi2c-credit-card-wireless-off-outline
    755	CREDIT_CARD_WIRELESS_OUTLINE	mdi2c-credit-card-wireless-outline
    756	КРИКЕТ	mdi2c-крикет
    757	УРОЖАЙ	mdi2c-кроп
    758	CROP_FREE	mdi2c-без урожая
    759	КУЛЬТУРА_ЛАНДШАФТ	mdi2c-crop-landscape
    760	CROP_PORTRAIT	mdi2c-кроп-портрет
    761	CROP_ROTATE	mdi2c-кроп-поворот
    762	CROP_SQUARE	mdi2c-урожай-квадрат
    763	ПЕРЕКРЕСТОК	mdi2c-перекрестие
    764	ПЕРЕКРЕСТКА_GPS	mdi2c-перекрестие-gps
    765	ПЕРЕКРЕСТКА_ВЫКЛ	mdi2c-перекрестие-выкл. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Поиск: Рубрики Seo Wordpress Дизайн Заработок Плагин Разное Рекомендац Сайт Совет Советы Тем Темы Урок Уроки