Material Design Icons

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

Иконки применяются для:

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

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

Подключение Material Design Icons

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

Подключение через CDN

Самый простой способ — добавить ссылку на таблицу стилей в HTML-документ:

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" rel="stylesheet">

После подключения иконки становятся доступными во всех компонентах Vuetify.

Установка через пакетный менеджер

При использовании современных инструментов сборки предпочтительно устанавливать пакет через npm или yarn.

npm install @mdi/font

или

yarn add @mdi/font

Затем необходимо подключить стили:

import '@mdi/font/css/materialdesignicons.css'

Компонент v-icon

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

Базовое использование

<v-icon>mdi-home</v-icon>

Иконка определяется строкой, начинающейся с префикса mdi-.

Примеры популярных иконок

<v-icon>mdi-account</v-icon>
<v-icon>mdi-menu</v-icon>
<v-icon>mdi-close</v-icon>
<v-icon>mdi-heart</v-icon>
<v-icon>mdi-email</v-icon>

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

Иконка Назначение
mdi-menu открытие навигационного меню
mdi-close закрытие окна
mdi-account профиль пользователя
mdi-heart отметка избранного
mdi-email почта или сообщения

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

Размер иконок регулируется через свойства компонента или через CSS.

Предустановленные размеры

<v-icon small>mdi-home</v-icon>
<v-icon>mdi-home</v-icon>
<v-icon large>mdi-home</v-icon>
<v-icon x-large>mdi-home</v-icon>

Предустановленные размеры соответствуют системе масштабирования Material Design.

Произвольный размер

Размер можно задать через CSS-класс или встроенный стиль:

<v-icon style="font-size: 48px">mdi-home</v-icon>

Изменение цвета иконок

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

Использование цветовых классов

<v-icon color="primary">mdi-star</v-icon>
<v-icon color="red">mdi-alert</v-icon>
<v-icon color="green">mdi-check</v-icon>

Vuetify применяет цвета из своей палитры.

Использование CSS

<v-icon class="custom-icon">mdi-heart</v-icon>
.custom-icon {
  color: #ff4081;
}

Иконки внутри компонентов Vuetify

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

Кнопки

<v-btn icon>
  <v-icon>mdi-magnify</v-icon>
</v-btn>

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

Поля ввода

Иконки часто используются внутри форм.

<v-text-field
  label="Поиск"
  prepend-icon="mdi-magnify"
></v-text-field>

или

<v-text-field
  label="Пароль"
  append-icon="mdi-eye"
></v-text-field>

Навигационные панели

<v-app-bar-nav-icon>
  <v-icon>mdi-menu</v-icon>
</v-app-bar-nav-icon>

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

Использование иконок как кнопок действий

Иконка может служить самостоятельным интерактивным элементом.

<v-icon @click="deleteItem">mdi-delete</v-icon>

Однако более распространённой практикой является использование иконок внутри кнопок:

<v-btn color="red">
  <v-icon left>mdi-delete</v-icon>
  Удалить
</v-btn>

Отображение иконок в списках

Иконки помогают визуально структурировать списки элементов.

<v-list>
  <v-list-item>
    <v-list-item-icon>
      <v-icon>mdi-folder</v-icon>
    </v-list-item-icon>

    <v-list-item-content>
      <v-list-item-title>Документы</v-list-item-title>
    </v-list-item-content>
  </v-list-item>
</v-list>

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

Иконки в уведомлениях и сообщениях

<v-alert type="success" icon="mdi-check-circle">
  Операция успешно выполнена
</v-alert>

Vuetify автоматически подбирает соответствующие иконки для разных типов уведомлений:

  • success
  • info
  • warning
  • error

Но при необходимости можно указать собственную пиктограмму.

Анимация иконок

Material Design Icons поддерживают анимации через CSS.

Вращение

<v-icon class="mdi-spin">mdi-loading</v-icon>

Класс mdi-spin создаёт непрерывное вращение, которое часто используется для индикаторов загрузки.

CSS-анимации

.icon-rotate {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
<v-icon class="icon-rotate">mdi-cog</v-icon>

Использование иконок в слотах компонентов

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

Пример с кнопкой закрытия

<v-chip close>
  Тег
</v-chip>

По умолчанию используется иконка закрытия mdi-close.

Её можно заменить:

<v-chip close close-icon="mdi-delete">
  Тег
</v-chip>

Замена стандартного набора иконок

Vuetify поддерживает несколько библиотек иконок:

  • Material Design Icons
  • Font Awesome
  • Material Icons
  • собственные SVG-иконки

Конфигурация задаётся при инициализации Vuetify.

createVuetify({
  icons: {
    defaultSet: 'mdi'
  }
})

Использование SVG-иконок

Material Design Icons могут использоваться не только как шрифты, но и как SVG.

SVG-иконки имеют ряд преимуществ:

  • лучшая масштабируемость;
  • более гибкая стилизация;
  • меньшая зависимость от шрифтов.

Пример регистрации SVG-иконок:

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'

createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi
    }
  }
})

Псевдонимы иконок (aliases)

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

Пример:

aliases: {
  close: 'mdi-close',
  delete: 'mdi-delete',
  success: 'mdi-check'
}

После этого иконки можно использовать так:

<v-icon>$close</v-icon>

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

Производительность и оптимизация

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

Использование SVG вместо шрифтов

SVG-иконки:

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

Минимизация используемых иконок

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

Кэширование

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

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

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

Распространённые практики:

1. Централизованный файл иконок

export const icons = {
  add: 'mdi-plus',
  edit: 'mdi-pencil',
  delete: 'mdi-delete',
  search: 'mdi-magnify'
}

Использование:

<v-icon>{{ icons.add }}</v-icon>

2. Семантические имена

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

iconSave
iconDelete
iconEdit

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

3. Ограниченный набор

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

Категории Material Design Icons

Набор MDI включает десятки тематических категорий:

Интерфейс

  • menu
  • close
  • settings
  • search

Пользователь

  • account
  • account-group
  • account-circle

Файлы

  • file
  • folder
  • file-document

Медиа

  • play
  • pause
  • stop
  • volume

Навигация

  • arrow-left
  • arrow-right
  • chevron-up
  • chevron-down

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

Принципы использования иконок в интерфейсах

В рамках Material Design сформированы несколько важных рекомендаций:

1. Иконка должна иметь понятный смысл

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

2. Избегать перегрузки

Слишком большое количество пиктограмм ухудшает читаемость интерфейса.

3. Сохранять единый стиль

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

4. Использовать подписи

Если значение иконки может быть неоднозначным, рядом размещается текст.

Практическое применение в интерфейсах Vuetify

Material Design Icons активно используются в основных элементах интерфейса:

  • панели инструментов
  • боковые меню
  • карточки
  • формы
  • таблицы
  • уведомления
  • диалоговые окна

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

Оглавление