quake 9
Home Grafikdesign Visuelle Kommunikation Markenidentität Symbolik Technologie

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

Lukas Fuchs vor 6 Monaten 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 Posts

Thumbnail

Kaufschneller.de Erfahrungen: Ein umfassender Überblick

E-Commerce

Thumbnail

Alles, was Sie über Icon DMG wissen müssen: Ein umfassender Leitfaden

Entwicklung

Das NFC Symbol: Bedeutung, Verwendung und Besonderheiten

Technologie

Instagram Logo Verwenden: Richtlinien und Best Practices

Rechtliche Aspekte

Spotify Symbol Bedeutung: Erklärung der Icons und Symbole

Benutzereinstellungen

Discord Rollen Icons: Optimale Gestaltung und Nutzung

Community-Engagement

Symbol:toixacmlluo = Arbeit: Die unerzählte Bedeutung hinter dem Code

Arbeit

v2-ef13x-2xwk6

Technologie

Tabellen übersichtlich gestalten: Icons für eine klare Darstellung

Benutzerfreundlichkeit

Das ultimative Taschenrechner-Symbol: Ein Leitfaden für Design und Anwendung

Benutzererfahrung

Beliebte Posts

Thumbnail

Kaufschneller.de Erfahrungen: Ein umfassender Überblick

E-Commerce

Thumbnail

Alles, was Sie über Icon DMG wissen müssen: Ein umfassender Leitfaden

Entwicklung

Das NFC Symbol: Bedeutung, Verwendung und Besonderheiten

Technologie

Instagram Logo Verwenden: Richtlinien und Best Practices

Rechtliche Aspekte

Spotify Symbol Bedeutung: Erklärung der Icons und Symbole

Benutzereinstellungen

Discord Rollen Icons: Optimale Gestaltung und Nutzung

Community-Engagement

Symbol:toixacmlluo = Arbeit: Die unerzählte Bedeutung hinter dem Code

Arbeit

v2-ef13x-2xwk6

Technologie

Tabellen übersichtlich gestalten: Icons für eine klare Darstellung

Benutzerfreundlichkeit

Das ultimative Taschenrechner-Symbol: Ein Leitfaden für Design und Anwendung

Benutzererfahrung