Icon

Icons werden verwendet, um gängige Aktionen darzustellen. Sie unterstützen Material Icons-Symbole sowie SVG-Symbole.

Verwendung

Importieren Sie die Komponente nach Bedarf:

import 'mdui/components/icon.js';

Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:

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

Beispiel:

Verwenden von Material Icons-Symbolen

Um Material Icons-Symbole mit dieser Komponente zu verwenden, müssen Sie die CSS-Datei von Material Icons separat importieren. Material Icons gibt es in 5 Varianten: Filled, Outlined, Rounded, Sharp, Two Tone. Bitte importieren Sie die entsprechende CSS-Datei je nach der gewünschten Symbolvariante:

<!-- 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"
/>

Wenn Sie die Komponente verwenden, übergeben Sie den Symbolnamen im Attribut name mit dem Suffix der Symbolvariante (die Filled-Variante benötigt keinen Suffix). Hier ist die Verwendung der 5 Varianten des Symbols delete:

Sie können das Material Icons Symbolsuchwerkzeug unten auf der Seite verwenden, um ein Symbol zu suchen. Ein Klick auf das gewünschte Symbol kopiert dann automatisch den Symbolcode in die Zwischenablage.

Darüber hinaus bietet mdui ein separates Paket @mdui/icons an, in dem jede Symbolkomponente eine eigenständige Datei ist. So können Sie nur die benötigten Symbolkomponenten importieren, ohne die gesamte Symbolbibliothek laden zu müssen.

Verwenden von SVG-Symbolen

Diese Komponente unterstützt auch die Verwendung von SVG-Symbolen als Symbolinhalt. Sie können den Link zu einem SVG-Symbol im Attribut src der Komponente angeben. Zum Beispiel:

Sie können den SVG-Inhalt auch im default Slot der Komponente übergeben. Zum Beispiel:

Beispiele

Farbe festlegen

Ändern Sie das CSS-Stilattribut color des <mdui-icon>-Elements oder seines übergeordneten Elements, um die Symbolfarbe zu ändern.

Größe festlegen

Ändern Sie das CSS-Stilattribut font-size des <mdui-icon>-Elements oder seines übergeordneten Elements, um die Symbolgröße zu ändern.