Angular Material Icons: Ein Leitfaden für benutzerfreundliche Schnittstellen

Was sind Angular Material Icons?

Angular Material Icons sind eine Bibliothek von Vektorsymbolen, die speziell für Angular-Anwendungen entwickelt wurden. Sie bieten eine einheitliche und zugängliche Möglichkeit, Benutzeroberflächen mit visuellen Elementen zu versehen, die die Benutzerfreundlichkeit und Zugänglichkeit verbessern.

Merkmale von Angular Material Icons

Vektorbasiert: Die Symbole sind vektorbasiert, was bedeutet, dass sie in jeder Größe oder Auflösung gestochen scharf dargestellt werden können, ohne an Qualität zu verlieren.
Modular: Die Bibliothek besteht aus einzelnen Symbolen, sodass du nur die Symbole einbinden kannst, die du benötigst, um die Größe deiner Anwendung zu reduzieren.
Material Design: Die Symbole folgen den Material Design-Richtlinien von Google, die Konsistenz und eine einheitliche Benutzererfahrung gewährleisten.
Zugänglich: Die Symbole sind barrierefrei gestaltet und enthalten ARIA-Attribute, um Screenreadern die Beschreibung der Symbole zu ermöglichen.

Vorteile der Verwendung von Angular Material Icons

Verbesserte Benutzerfreundlichkeit: Symbole helfen Benutzern, schnell Aktionen zu erkennen und zu verstehen.
Visuelle Attraktivität: Die Symbole verleihen deiner Anwendung einen modernen und ansprechenden Touch.
Zeitersparnis: Die Verwendung einer vorgefertigten Symbolbibliothek erspart dir die Erstellung eigener Symbole oder die Suche nach Symbolen von Drittanbietern.
Konsistenz: Da alle Symbole dem Material Design folgen, wird eine einheitliche Erfahrung über verschiedene Anwendungen hinweg gewährleistet.

Vorteile der Verwendung von Angular Material Icons

Angular Material Icons bieten zahlreiche Vorteile, die deine Schnittstellen verbessern und die Nutzerfreundlichkeit erhöhen können:

Konsistenz und einheitliches Design

Angular Material Icons basieren auf der Material Design-Sprache von Google, die sich durch eine konsistente Ästhetik und ein einheitliches Erscheinungsbild auszeichnet. Durch ihre Verwendung kannst du sicherstellen, dass deine Schnittstelle ein professionelles und poliertes Erscheinungsbild hat, das die Nutzererfahrung verbessert.

Große Auswahl an Symbolen

Angular Material Icons umfasst eine umfangreiche Bibliothek mit über 2.000 Symbolen, die verschiedene Kategorien und Stile abdecken. Von allgemeinen Symbolen wie Pfeilen und Schaltflächen bis hin zu spezifischen Symbolen für Branchen wie Finanzen und Gesundheitswesen findest du alles, was du für die Gestaltung deiner Schnittstelle benötigst.

Skalierbarkeit und Geräteunabhängigkeit

Angular Material Icons sind vektorbasiert, was bedeutet, dass sie ohne Qualitätsverlust auf jede Größe skaliert werden können. Dies sorgt für eine optimale Anzeige auf verschiedenen Geräten mit unterschiedlichen Bildschirmauflösungen, einschließlich Smartphones, Tablets und Desktops.

Optimierte Leistung

Angular Material Icons werden durch die optimierte SVG-Technologie (Scalable Vector Graphics) unterstützt, die sicherstellt, dass sie schnell laden und die Leistung deiner Anwendung nicht beeinträchtigen.

Barrierefreiheit

Angular Material Icons sind so konzipiert, dass sie barrierefrei sind und für Nutzer mit Sehbehinderungen zugänglich sind. Jedes Symbol verfügt über ein alternatives Textattribut, das von Bildschirmleseprogrammen gelesen werden kann, um Nutzern eine klare Beschreibung des Zwecks des Symbols zu geben.

Installation und Verwendung von Angular Material Icons

Um Angular Material Icons in deine Anwendung zu integrieren, folge diesen Schritten:

Installation

Installiere das @angular/material-Paket über npm:

npm install @angular/material

Importiere das MatIconModule-Modul in dein Anwendungsmodul:

import {MatIconModule} from '@angular/material/icon';

Füge das MatIconModule-Modul dem Array der importierten Module in deinem Anwendungsmodul hinzu:

imports: [
  ...,
  MatIconModule,
  ...
],

Verwendung

Um Icons in deinen Vorlagen zu verwenden, verwende das <mat-icon>-Element und gib den Namen des entsprechenden Icons im svgIcon-Attribut an:

<mat-icon svgIcon="favorite"></mat-icon>

Du kannst auch zusätzliche Attribute wie color und fontSize angeben, um das Erscheinungsbild des Icons zu steuern.

Laden von benutzerdefinierten Icons

Neben den integrierten Icons kannst du auch benutzerdefinierte SVG-Icons laden:

Erstelle ein Verzeichnis namens assets/icons in deinem Projekt.
Platziere deine benutzerdefinierten SVG-Dateien in diesem Verzeichnis.
Importiere die SVG-Dateien in deine Komponente oder dein Modul:

import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-icon',
  template: '<mat-icon svgIcon="assets/icons/my-icon.svg"></mat-icon>',
})
export class CustomIconComponent {}

Lade das SafeHtml-Modul und desinfiziere den SVG-Code:

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer) {}

iconUrl = this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/my-icon.svg');

Gib die desinfizierte URL im svgIcon-Attribut an:

<mat-icon [svgIcon]="iconUrl"></mat-icon>

Übersicht über die verfügbaren Icon-Typen

Angular Material stellt eine umfangreiche Sammlung von über 1000 qualitativ hochwertigen Icons zur Verfügung, die dir Gestaltungsmöglichkeiten für eine Vielzahl von Anwendungsfällen bieten. Diese Icons werden in zwei Haupttypen unterteilt:

Icon-Fonts

Icon-Fonts sind Vektorgrafiken, die in Schriftartenformat vorliegen. Sie sind skalierbar, was bedeutet, dass du sie in jeder Größe ohne Qualitätsverlust verwenden kannst. Icon-Fonts werden typischerweise als SVG-Dateien (Scalable Vector Graphics) bereitgestellt.

SVG-Symbole

SVG-Symbole (Scalable Vector Graphics) sind XML-basierte Vektorgrafiken, die flexibel und leichtgewichtig sind. Sie bieten eine hohe Bildqualität und ermöglichen dir die individuelle Anpassung jedes einzelnen Icons.

Weitere Untertypen:

Zusätzlich zu den beiden Haupttypen von Icons bietet Angular Material auch einige spezifischere Untertypen an:

Themenspezifische Icons

Themenspezifische Icons sind Icons, die speziell für bestimmte Design-Themes wie Material Design und Office UI Fabric entwickelt wurden. Sie stellen eine einheitliche Designtonsprache und ein konsistentes Erlebnis für deine Anwendungen sicher.

Benutzerdefinierte Icons

Angular Material ermöglicht es dir außerdem, deine eigenen benutzerdefinierten Icons zu erstellen und hinzuzufügen. Du kannst SVG-Dateien oder andere Bildformate verwenden, um deine eigenen Icons zu erstellen und sie in deine Anwendung zu integrieren.

Verwendung von Icon-Typen

Die Wahl des richtigen Icon-Typs hängt von deinen spezifischen Anforderungen ab:

Für Skalierbarkeit und Konsistenz verwendest du Icon-Fonts.
Für Flexibilität und Anpassung verwendest du SVG-Symbole.
Für themenspezifische Anwendungen verwendest du themenspezifische Icons.
Für benutzerdefinierte Designs erstellst du deine eigenen benutzerdefinierten Icons.

Anpassen von Angular Material Icons

Überblick

Angular Material Icons sind hochgradig anpassbar, sodass du sie an das Aussehen und die Haptik deiner Anwendung anpassen kannst.

Farbe

Ändern der Vordergrundfarbe:

Verwende die Eigenschaft color zum Anpassen der Vordergrundfarbe des Symbols. Du kannst eine vordefinierte Farbe aus der Angular-Material-Palette oder einen benutzerdefinierten Farbwert angeben.

<mat-icon color="primary"></mat-icon>

Ändern der Hintergrundfarbe:

Wenn du eine Hintergrundfarbe für das Symbol festlegen möchtest, verwende die Eigenschaft backgroundColor.

<mat-icon backgroundColor="accent"></mat-icon>

Größe

Ändern der Größe:

Passe die Größe des Symbols mit der Eigenschaft fontSize an. Die Einheit kann px, em oder rem sein.

<mat-icon fontSize="24px"></mat-icon>

Skalieren:

Du kannst die Größe des Symbols auch proportional mit der Eigenschaft scale skalieren. Der Standardwert ist 1.

<mat-icon scale="2"></mat-icon>

Form

Ändern der Form:

Angular Material Icons unterstützen verschiedene Formen, darunter runde, quadratische und scharfrandige Icons. Verwende die Eigenschaft shape zum Ändern der Form.

<mat-icon shape="round"></mat-icon>

Rotation

Drehen des Symbols:

Du kannst das Symbol mit der Eigenschaft rotate drehen. Der Drehwinkel wird in Grad angegeben.

<mat-icon rotate="90"></mat-icon>

Ligaturen

Verwenden von Ligaturen:

Ligaturen sind Kombinationen von Symbolen, die ein einzelnes visuelles Element bilden. Du kannst Ligaturen aktivieren, indem du die Eigenschaft ligature auf true setzt.

<mat-icon ligature="true">face</mat-icon>

Erstellen benutzerdefinierter Ligaturen:

Du kannst auch deine eigenen Ligaturen erstellen, indem du die matIcon-Direktive verwendest.

@Component({
  selector: 'app-custom-ligature',
  template: `<mat-icon matIcon="star_rate"></mat-icon>`
})
export class CustomLigatureComponent {}

Best Practices für die Verwendung von Angular Material Icons

Um eine konsistente und benutzerfreundliche Oberfläche zu gewährleisten, ist es wichtig, Best Practices bei der Verwendung von Angular Material Icons zu befolgen:

Übersichtlichkeit

Wähle Icons, die klar und einfach zu erkennen sind und zum Kontext deiner Anwendung passen.
Verwende konsistente Icon-Größen und Abstände, um eine visuelle Hierarchie zu schaffen.
Stelle sicher, dass die Icons bei verschiedenen Bildschirmgrößen und Geräten lesbar sind.

Relevanz

Verwende Icons, die die Funktion oder den Zweck eines Elements oder einer Aktion genau widerspiegeln.
Vermeide es, allgemeine oder überladene Icons zu verwenden, die den Benutzern keine klare Bedeutung vermitteln.
Überdenke die Verwendung mehrerer Icons für dieselbe Aktion oder Funktion.

Zugänglichkeit

Verwende semantische Icons, die für Screenreader und assistive Technologien zugänglich sind.
Biete Alternativtext oder Beschriftungen für Icons, insbesondere für komplexe oder abstrakte Symbole.
Stelle sicher, dass die Icons ein ausreichendes Kontrastverhältnis zum Hintergrund aufweisen.

Stil

Passe die Größe und Farbe der Icons an die Ästhetik und das Farbschema deiner Anwendung an.
Verwende das Material Design Theme System, um eine konsistente Farbpalette zu gewährleisten.
Erwäge die Verwendung von SVG-Icons anstelle von PNGs, da sie skalierbar und flexibler sind.

Wartung

Verwalte deine Icons effektiv, indem du ein Icon-System oder eine Bibliothek einsetzt.
Aktualisiere deine Icons regelmäßig, um sicherzustellen, dass sie den neuesten Standards entsprechen.
Überprüfe regelmäßig die Zugänglichkeit und Benutzerfreundlichkeit deiner Icons.

Fehlerbehebung bei häufig auftretenden Problemen

Manchmal können bei der Verwendung von Angular Material Icons Probleme auftreten. Hier sind einige häufig auftretende Probleme und ihre Lösungen:

Fehlende Icons

Ursache: Ein Icon-Typ ist nicht installiert.
Lösung: Installiere den entsprechenden Icon-Typ mithilfe des Befehls npm install @angular/material-icons.

Icons werden nicht angezeigt

Ursache: Du hast vergessen, den Font-Link im index.html hinzuzufügen.
Lösung: Füge den folgenden Link im <head>-Tag deiner index.html hinzu:

<link
  href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
  rel="stylesheet"
/>

Icons sind zu groß oder zu klein

Ursache: Du hast die Größe der Icons nicht angepasst.
Lösung: Verwende die Eigenschaft font-size im CSS, um die Größe der Icons anzupassen, z. B.:

.my-icons {
  font-size: 24px;
}

Icons sind unscharf oder pixelig

Ursache: Das Icon-Format ist nicht für die aktuelle Größe optimiert.
Lösung: Probiere ein anderes Icon-Format aus, z. B. SVG oder PNG.

Icons erscheinen nicht an der richtigen Stelle

Ursache: Du hast vergessen, die Icon-Position anzugeben.
Lösung: Verwende die CSS-Eigenschaften display, position und left/top/right/bottom, um die Position des Icons festzulegen.

Icons überschneiden sich mit anderen Elementen

Ursache: Du hast inkonsistente Abstände verwendet.
Lösung: Verwende CSS-Eigenschaften wie margin, padding und z-index, um sicherzustellen, dass die Icons nicht mit anderen Elementen kollidieren.

Icons reagieren nicht auf Befehle

Ursache: Du hast vergessen, das (click)-Ereignis hinzuzufügen.
Lösung: Füge das (click)-Ereignis zum Icon-Element hinzu, um eine Aktion auszulösen, wenn auf das Icon geklickt wird, z. B.:

<mat-icon (click)="doSomething()">home</mat-icon>