IconИконка

Иконка используется для представления распространенных действий. Она поддерживает иконки Material Icons, а также SVG-иконки.

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

При необходимости импортируйте компонент:

import 'mdui/components/icon.js';

При необходимости импортируйте типы TypeScript:

import type { Icon } from 'mdui/components/icon.js';

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

Использование иконок Material Icons

Чтобы использовать иконки Material Icons с этим компонентом, вам необходимо отдельно импортировать CSS-файл Material Icons. Существует 5 вариантов Material Icons: Filled, Outlined, Rounded, Sharp, Two Tone. Импортируйте соответствующий CSS-файл в зависимости от используемого варианта иконки:

<!-- Filled -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons"
  rel="stylesheet"
/>

<!-- Outlined -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
  rel="stylesheet"
/>

<!-- Rounded -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Round"
  rel="stylesheet"
/>

<!-- Sharp -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Sharp"
  rel="stylesheet"
/>

<!-- Two Tone -->
<link
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone"
  rel="stylesheet"
/>

При использовании компонента передайте название иконки в атрибут name, добавив суффикс варианта (для варианта Filled суффикс не требуется). Ниже приведены примеры использования иконки delete для всех 5 вариантов:

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

Кроме того, mdui предоставляет отдельный пакет @mdui/icons, в котором каждый компонент иконки представлен отдельным файлом, что позволяет импортировать только нужные иконки без загрузки всей библиотеки.

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

Этот компонент также поддерживает использование SVG-иконок. Вы можете передать ссылку на SVG-иконку через атрибут src. Например:

Также можно передать содержимое SVG в слот по умолчанию. Например:

Примеры

Установка цвета

Измените цвет иконки, установив CSS-свойство color для элемента <mdui-icon> или его родителя.

Установка размера

Измените размер иконки, установив CSS-свойство font-size для элемента <mdui-icon> или его родителя.