quake 9
Home Grafikdesign Visuelle Kommunikation Nachhaltigkeit Tiny House Markenidentität

Angular-Icons: Erstellen und Verwenden von benutzerdefinierten Icons für deine Webanwendungen

Lukas Fuchs vor 1 Jahr in  Webentwicklung 3 Minuten Lesedauer

Erstellen von benutzerdefinierten SVG-Icons

Um deine eigenen benutzerdefinierten Icons zu erstellen, benötigst du eine vektorbasierte Grafikbearbeitungssoftware wie Inkscape oder Adobe Illustrator.

Verwenden von Inkscape

  1. Erstelle ein neues Dokument: Öffne Inkscape und erstelle ein neues Dokument mit den gewünschten Abmessungen.
  2. Zeichne dein Icon: Verwende die Zeichenwerkzeuge, um die Form deines Icons zu erstellen.
  3. Exportieren als SVG: Sobald dein Icon fertig ist, exportiere es als SVG-Datei im Format "Plain SVG".

Verwenden von Adobe Illustrator

  1. Erstelle ein neues Dokument: Erstelle in Illustrator ein neues Dokument mit den gewünschten Abmessungen.
  2. Zeichne dein Icon: Verwende die Stift- oder Formwerkzeuge, um die Form deines Icons zu erstellen.
  3. Exportieren als SVG: Gehe zu "Datei" -> "Exportieren". Wähle "SVG" als Format und stelle sicher, dass "SVG Tiny" aktiviert ist.

Best Practices für SVG-Icons

  • Verwende eindeutige Namen: Gib deinen SVG-Dateien eindeutige und aussagekräftige Namen.
  • Optimiere deine Icons: Entferne unnötige Pfade und Formen, um die Dateigröße zu reduzieren.
  • Verwende die richtige Größe: Gestalte deine Icons in der gewünschten Größe mit der Option "Zoomen und Anpassen".
  • Vermeide Text: Verwende keine Schriftarten in deinen Icons, da dies zu Kompatibilitätsproblemen führen kann.

Verwendung von Angular-Icons in deinen Komponenten

Sobald du deine benutzerdefinierten Icons erstellt und zu deinem Projekt hinzugefügt hast, kannst du sie in deinen Angular-Komponenten verwenden. Hier sind die Schritte:

Importieren des Angular-Icons-Moduls

Zunächst musst du das Angular-Icons-Modul in deine Komponente importieren:

import { AngularIconsModule } from 'angular-icons';

Importieren des spezifischen Icons

Als Nächstes musst du das Symbol importieren, das du verwenden möchtest, beispielsweise das FontAwesome-Symbol für "Stern":

import { faStar } from '@fortawesome/free-solid-svg-icons';

Hinzufügen des Icons zu deinem Template

Im HTML-Template deiner Komponente kannst du das Icon nun mithilfe der Komponente faIcon hinzufügen:

<fa-icon [icon]="faStar"></fa-icon>

wobei faStar das zuvor importierte Icon ist.

Anpassen der Icon-Größe und -Farbe

Du kannst Größe und Farbe des Symbols mit den Attributen size und color anpassen:

<fa-icon [icon]="faStar" size="2x" color="red"></fa-icon>

Fehlerbehebung

Wenn du beim Anzeigen deiner Icons Probleme hast, überprüfe Folgendes:

  • Hast du das Angular-Icons-Modul in deine Komponente importiert?
  • Hast du das richtige Icon importiert?
  • Hast du das Icon korrekt in deinem Template verwendet?

Styling von Icons mit CSS

Sobald du deine benutzerdefinierten Icons zu deinem Angular-Projekt hinzugefügt hast, kannst du sie mit CSS stylen, um ihr Erscheinungsbild an das Design deiner Anwendung anzupassen.

Größenanpassung

Um die Größe deiner Icons zu ändern, verwende die CSS-Eigenschaft font-size. Diese Eigenschaft legt die Größe des SVG-Symbols fest, das in deinem Icon verwendet wird.

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

Farben

Du kannst die Farbe deiner Icons mit der CSS-Eigenschaft color ändern. Diese Eigenschaft legt die Füllfarbe des SVG-Symbols fest.

.my-icon {
  color: #ff0000;
}

Ausrichtung

Um deine Icons auszurichten, kannst du die CSS-Eigenschaften margin, padding und float verwenden. Diese Eigenschaften ermöglichen es dir, um dein Icon herum Leerzeichen hinzuzufügen, es einzurücken oder es an einer bestimmten Position auf der Seite zu platzieren.

.my-icon {
  margin-top: 10px;
  margin-left: 20px;
  float: right;
}

Drehung

Um deine Icons zu drehen, kannst du die CSS-Eigenschaft transform verwenden. Diese Eigenschaft ermöglicht es dir, dein Icon um einen bestimmten Winkel zu drehen.

.my-icon {
  transform: rotate(45deg);
}

Animation

Um deine Icons zu animieren, kannst du die CSS-Eigenschaften transition und animation verwenden. Diese Eigenschaften ermöglichen es dir, Überblendungen, Transformationen oder andere Animationen anzuwenden, wenn der Status deines Icons geändert wird.

.my-icon:hover {
  transition: all 0.5s ease-in-out;
  transform: scale(1.5);
}

Anpassung von Icons mit ng-template

Angular-Icons bietet dir die Möglichkeit, deine Icons mit ng-templates anzupassen. Dies gibt dir die volle Kontrolle über das Aussehen und Verhalten deiner Icons.

Vorteile der Verwendung von ng-templates

  • Verbesserte Anpassung: Du kannst das Aussehen und Verhalten deiner Icons vollständig anpassen, indem du benutzerdefinierte HTML- und CSS-Vorlagen verwendest.
  • Wiederverwendbarkeit: Du kannst Vorlagen für häufig verwendete Icons erstellen und diese in mehreren Komponenten wiederverwenden.
  • Dynamische Inhalte: Du kannst ng-templates verwenden, um dynamische Inhalte in deine Icons einzubinden, wie z. B. Zähler oder Benachrichtigungen.

Verwendung von ng-templates

Um ein Icon mit ng-template anzupassen, musst du den folgenden Schritten folgen:

  1. Importiere das NgTemplateOutletModule: 
    import { NgTemplateOutletModule } from '@angular/common';
  2. Erstelle eine ng-template: 
    <ng-template #myTemplate>
  <svg>
    <!-- Dein benutzerdefinierter SVG-Code -->
  </svg>
</ng-template>
  3. Füge das ng-template zu deiner Komponente hinzu: 
    <fa-icon [icon]="['fas', 'user']" [ngTemplate]="myTemplate"></fa-icon>

Beispiele für die Anpassung von Icons

Beispiel 1: Ändern der Farbe eines Icons

ng-template {
  color: red;
}

Beispiel 2: Hinzufügen eines Hintergrunds zu einem Icon

ng-template {
  background: #ccc;
}

Beispiel 3: Hinzufügen von Text zu einem Icon

<ng-template #myTemplate>
  <div>
    <fa-icon [icon]="['fas', 'user']"></fa-icon>
    <span>Benutzername</span>
  </div>
</ng-template>

Fazit

Ng-templates sind ein leistungsstarkes Tool zur Anpassung von Angular-Icons. Sie ermöglichen es dir, das Aussehen und Verhalten deiner Icons vollständig zu kontrollieren und so benutzerdefinierte und wiederverwendbare Iconkomponenten zu erstellen.

Fehlerbehebung bei Problemen mit Angular-Icons

Befolgst du die oben beschriebenen Schritte, kannst du in der Regel problemlos mit Angular-Icons arbeiten. Manchmal kann es jedoch zu Problemen kommen. Hier findest du eine Anleitung zur Fehlerbehebung:

Häufig gestellte Fragen

Frage: Meine Icons werden nicht angezeigt.

Antwort: Stelle sicher, dass du die Anweisungen zur Installation und Einrichtung von Angular-Icons befolgt hast, insbesondere das Importieren des IconModule in dein Modul. Überprüfe außerdem, ob der Pfad zu deinen SVG-Dateien korrekt ist und dass die Dateien selbst gültiges SVG sind.

Frage: Meine Icons haben die falsche Farbe oder Größe.

Antwort: Das Styling von Icons erfolgt über CSS. Überprüfe deine CSS-Regeln und passe die Eigenschaften wie color und font-size nach Bedarf an.

Frage: Ich erhalte Fehlermeldungen im Zusammenhang mit Angular-Icons.

Antwort: Überprüfe die Konsolenprotokolle deines Browsers auf spezifische Fehlermeldungen. Sie können Hinweise auf das Problem geben. Überprüfe außerdem, ob du die neueste Version von Angular-Icons verwendest.

Weitere Themen

Fehlende Abhängigkeiten: Stelle sicher, dass alle erforderlichen Abhängigkeiten installiert sind, einschließlich Angular Material und Angular Flex Layout.

Syntaxfehler: Überprüfe den Code deiner Komponenten und die Syntax deiner SVG-Dateien auf Fehler.

Zugriffsprobleme: Überprüfe die Berechtigungen für die SVG-Dateien und die Netzwerkverbindung.

Probleme mit ng-template: Wenn du benutzerdefinierte Vorlagen verwendest, stelle sicher, dass die Syntax korrekt ist und dass die Vorlage an die richtige Stelle eingefügt wurde.

Anbieterspezifische Probleme: Wenn du einen bestimmten Icon-Anbieter wie FontAwesome verwendest, beachte die spezifischen Anweisungen zur Fehlerbehebung des Anbieters.

Folge uns

Neue Beiträge

Das Sparkassen-Logo: Geschichte, Bedeutung und Variationen

Geschichte des Sparkassen-Logos

Die verborgenen Bedeutungen hinter Schloss-Symbolen

Geschichte der Schloss-Symbole

Thumbnail

Instagram Logo Verwenden: Richtlinien und Best Practices

Rechtliche Aspekte

ICON 6 Teilnehmer: Eine exklusive Gemeinschaft für angehende Führungskräfte

Professionelle Weiterbildung

Symbole im Lebenslauf: Ein Leitfaden zur professionellen Darstellung

Karriereentwicklung

Das Router-Symbol: Eine Anleitung zu seinen Bedeutungen und Verwendungen

Digitale Kommunikation

ICON-Zahnbehandlung: Vorsicht vor möglichen Nachteilen

Kosten und Finanzierung

Thumbnail

Das umfassende Handbuch: USB-Symbole für die klare Datenübertragung

Fehlerbehebung

TeamSpeak-Symbole: Der ultimative Leitfaden zur Personalisierung Ihres Voice-Chats

Einführung in TeamSpeak-Symbole

Windows-Icon: Leitfaden für Design, Anpassung und Optimierung

Design-Prinzipien

Beliebte Beiträge

Offizielles Chat GPT-Symbol: Herunterladen und Verwenden des KI-Logos

Grafikdesign

Die vollständige Anleitung zu Windows-Symbolen

Einführung in Windows-Symbole

Das Instagram-Logo: Geschichte, Bedeutung und Verwendung

Design und Branding

Das SMS-Symbol: Bedeutung, Verwendung und Best Practices

Kulturelle Unterschiede in der Verwendung

Das Lupe-Symbol: Unverzichtbares Werkzeug für die Online-Suche

Technologie

Minecraft-Server-Icon-Größe: Optimale Abmessungen und Empfehlungen

Gaming

Thumbnail

Discord Rollen Icons: Optimale Gestaltung und Nutzung

Community-Engagement

Erstellung eines benutzerdefinierten PowerShell-Logos: Ein Leitfaden für Experten

Programmierung

Das VW-Symbol: Geschichte, Bedeutung und Evolution

Geschichte des VW-Symbols

Thumbnail

Das umfassende Handbuch zu Teams-Symbolen: So verwenden Sie sie effektiv für Ihr Team

Einführung in Teams-Symbole