Icon
Die <Icon Name="...">-Komponente rendert Material-Symbol-Icons. Parameter: Name (Ligatur-Text), Size (CSS-Größe), Color (CSS-Farbe).
Grundlegende Verwendung
Standard
Größen (Size-Parameter)
Skalierung
oo-size-xsoo-size-smoo-size-mdoo-size-lgoo-size-xlFarben (Color-Parameter)
Color
In Buttons
Button (Standard)
Button Xs
Button Sm
Button Md (Standard)
Button Lg
Button Xl
In Badge
Badge (Standard Sm)
Erfolgreich
Warnung
Fehler
Info
Neu
Badge Xs
Erfolgreich
Warnung
Fehler
Badge Md
Erfolgreich
Warnung
Fehler
Badge Lg
Erfolgreich
Warnung
Fehler
Badge Xl
Erfolgreich
Warnung
Fehler
In Card
Card mit Icon
Benutzer
Benutzerverwaltung
Verwalten Sie hier alle registrierten Benutzer.
Statistiken
Auswertungen
Aktuelle Kennzahlen auf einen Blick.
Einstellungen
Konfiguration
Systemeinstellungen anpassen.
In Stack / Row / Column
Horizontal Stack
Datei erfolgreich hochgeladen
Verbindung fehlgeschlagen
Verarbeitung läuft noch
Row / Column
Dokumente
Bilder
Videos
Audio
In MessageBar
Alle Typen
Icon im Fließtext (verschiedene Schriftgrößen)
Normaler Text (1rem)
Bitte klicken Sie auf für weitere Informationen. Das Icon zeigt Erfolg an. Mit werden Warnhinweise markiert.
Großer Text (1.5rem)
Klicken Sie auf um die Einstellungen zu öffnen.
Kleiner Text (0.8rem)
Hinweis: Diese Funktion befindet sich in der Beta-Phase.
Sehr kleiner Text (0.65rem)
Status: Online Offline
Überschrift h1
Startseite
Überschrift h2
Dashboard
Überschrift h3
Berichte
Überschrift h4
Statistiken
Überschrift h5
Dokumente
Liste mit Icons
- Automatische Synchronisation aktiv
- Zwei-Faktor-Authentifizierung aktiviert
- E-Mail-Benachrichtigungen deaktiviert
- API-Schlüssel noch nicht konfiguriert
Icon ohne Container (nackt)
class & style
class
style
SKILL.md – Icon
--- name: Icon description: Onesown Blazor Komponente Icon (Common). Verwende diesen Skill wenn du die Icon-Komponente verwenden, konfigurieren oder debuggen moechtest. --- # Icon **Namespace:** `Onesown.Blazor.Components` **Kategorie:** Common **Basisklasse:** `OoComponentBase` Rendert ein Material-Symbol-Icon als inline-Element mit korrektem Baseline-Alignment. Unterstützt optionale Farbe und leitet ungematchte HTML-Attribute (aria-*, data-*) durch. **Live-Demo:** https://components.schini.com/demo/icon ## Parameter | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Color`` | ``string`` | | Optionale Farbe (CSS-Wert), z.B. "#ef4444" oder "var(--oo-danger)". | ## Geerbte Parameter (OoComponentBase) Alle nicht deklarierten HTML-Attribute (``class``, ``style``, ``data-*``, ``aria-*``, ...) werden an das Root-Element weitergereicht. | Parameter | Typ | Standard | Beschreibung | |---|---|---|---| | ``Size`` | ``string`` | | Größe der Komponente. Mögliche Werte: OoSize.Xs, OoSize.Sm, OoSize.Md, OoSize.Lg, OoSize.Xl. Wird als CSS-Klasse am Root-Element gesetzt. | ## Hinweise - Natives HTML-Attribut class wird automatisch an das Root-Element weitergegeben - Natives HTML-Attribut style wird automatisch an das Root-Element weitergegeben - Alle weiteren nicht deklarierten Attribute (data-*, aria-*, id, tabindex, …) werden ebenfalls weitergereicht - Größe der Komponente via Size mit OoSize-Konstanten steuern (OoSize.Xs bis OoSize.Xl) - Name ist Pflichtparameter: Name="home" oder Name="delete" (Material Symbols Ligatur-Name) - Farbe setzen: Color="#ef4444" oder Color="var(--oo-danger)" für CSS-Variable - Größe: über CSS font-size am Element oder per Size-Parameter (oo-size-xs … oo-size-xl) - Barrierefreiheit: aria-hidden="true" wird automatisch gesetzt; mit aria-label überschreiben - Inline-Nutzung: das Icon rendert als <span> und fügt sich nahtlos in Fließtext ein