---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/icon-sets'
title: 'Eigene Icon-Sets | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T04:05:01+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Die Icon-Auswahl bietet 14 eingebaute Icon-Sets. Eigene fügen Sie per
  YAML-Datei in Ihrem Modul oder Theme hinzu, oder ändern die Liste per
  Alter-Hook. Das Modul mergt jede gefundene *.dxpr_icon_sets.yml-Datei
  in aktivierten Modulen und Themes und führt dann den Hook aus.
  Eingebaute Sets
  Aus dxpr_builder.dxpr_icon_sets.yml:
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Eigene Icon-Sets'
      description: |-
        Die Icon-Auswahl bietet 14 eingebaute Icon-Sets. Eigene fügen Sie per
        YAML-Datei in Ihrem Modul oder Theme hinzu, oder ändern die Liste per
        Alter-Hook. Das Modul mergt jede gefundene *.dxpr_icon_sets.yml-Datei
        in aktivierten Modulen und Themes und führt dann den Hook aus.
        Eingebaute Sets
        Aus dxpr_builder.dxpr_icon_sets.yml:
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T04:05:01+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/icon-sets'
      articleSection: 'Darauf aufbauen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/icon-sets'
      description: |-
        Die Icon-Auswahl bietet 14 eingebaute Icon-Sets. Eigene fügen Sie per
        YAML-Datei in Ihrem Modul oder Theme hinzu, oder ändern die Liste per
        Alter-Hook. Das Modul mergt jede gefundene *.dxpr_icon_sets.yml-Datei
        in aktivierten Modulen und Themes und führt dann den Hook aus.
        Eingebaute Sets
        Aus dxpr_builder.dxpr_icon_sets.yml:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Erweitern](/de/hc/documentation/learn-dxpr-builder/extend) /[Darauf aufbauen](/de/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Eigene Icon-Sets.

 DXPR Builder lernenErweiternDarauf aufbauen

   ## In diesem Leitfaden

Die Icon-Auswahl bietet 14 eingebaute Icon-Sets. Eigene fügen Sie per YAML-Datei in Ihrem Modul oder Theme hinzu, oder ändern die Liste per Alter-Hook. Das Modul mergt jede gefundene `*.dxpr_icon_sets.yml`-Datei in aktivierten Modulen und Themes und führt dann den Hook aus.

## Eingebaute Sets

Aus `dxpr_builder.dxpr_icon_sets.yml`:

| Schlüssel | Bezeichnung | Präfix |
|---|---|---|
| `bi` | Bootstrap Icons | `bi` |
| `et` | ET Line Icons | `et` |
| `fa` | Font Awesome (v4 compatibility) | `fa` |
| `fab` | Font Awesome Free Brands | `fab` |
| `far` | Font Awesome Free Regular | `far` |
| `fas` | Font Awesome Free Solid | `fas` |
| `glyphicon` | Glyphicon Halflings | `glyphicon` |
| `pe` | Pixeden Line Icons | `pe` |
| `ph` | Phosphor Icons Regular | `ph` |
| `ph_bold` | Phosphor Icons Bold | `ph-bold` |
| `ph_duotone` | Phosphor Icons Duotone | `ph-duotone` |
| `ph_fill` | Phosphor Icons Fill | `ph-fill` |
| `ph_light` | Phosphor Icons Light | `ph-light` |
| `ph_thin` | Phosphor Icons Thin | `ph-thin` |

Ein Builder-Profil kann begrenzen, welche Sets seine Bearbeitenden sehen (**Icon sets** auf dem Profilformular).

## YAML-Erkennung (empfohlen)

Erstellen Sie `mymodule.dxpr_icon_sets.yml` in der Root Ihres Moduls oder Themes:

```yaml
material:
  label: 'Material Symbols'
  prefix: material-symbols
  css: vendor/material-symbols/material-symbols.css
  library: mymodule/material_symbols
  icons:
    - 'material-symbols material-symbols-star'
    - 'material-symbols material-symbols-home'
    - 'material-symbols material-symbols-search'

```

Ein Set mit demselben Schlüssel wie ein früheres ersetzt es.

### Eigenschaften

| Eigenschaft | Erforderlich | Beschreibung |
|---|---|---|
| `label` | Ja | Name im Icon-Set-Dropdown; bei Fehlen wird der Schlüssel genutzt |
| `prefix` | Ja | CSS-Klassenpräfix, das Icons dieses Sets kennzeichnet |
| `css` | Ja | Stylesheet, das der Editor lädt; ein relativer Pfad wird ab Modul- oder Theme-Root aufgelöst |
| `library` | Ja | Drupal-Bibliothek, die für Besuchende angehängt wird, wenn gespeicherte Inhalte dieses Set nutzen |
| `icon_prefix` | Nein | Präfix des Icon-Namens, wenn er von `prefix` abweicht, wie in `fas fa-heart` |
| `icons` | Ja\* | Volle Liste der Icon-Klassen |

\*Die eingebauten Sets lassen `icons` weg; der Editor hat ihre Listen in JavaScript. Ihr eigenes Set muss jedes Icon listen.

## Drupal-Bibliotheksdefinition

Registrieren Sie das Stylesheet als Bibliothek in `mymodule.libraries.yml`, damit Besuchende es auf Seiten erhalten, die Ihre Icons nutzen:

```yaml
material_symbols:
  css:
    theme:
      vendor/material-symbols/material-symbols.css: {}

```

Das Modul hängt eine Bibliothek mit `/` im Namen nur an, wenn sie die `library` eines registrierten Icon-Sets ist.

## Alter-Hook

Für Lauflogik, etwa ein Set nur unter einer Bedingung hinzuzufügen, implementieren Sie `hook_dxpr_builder_icon_sets_alter()`. Der Hook läuft nach Auflösung der YAML-Pfade, geben Sie `css` daher einen Pfad ab Drupal-Root:

```php
/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  if (some_condition()) {
    $module_path = \Drupal::service('extension.list.module')
      ->getPath('mymodule');
    $icon_sets['custom'] = [
      'label' => t('Custom Icons'),
      'prefix' => 'ci',
      'css' => $module_path . '/css/custom-icons.css',
      'library' => 'mymodule/custom_icons',
      'icons' => ['ci ci-logo', 'ci ci-arrow'],
    ];
  }
}

```

Siehe [Hooks-API-Referenz](/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/hooks-api) für die übrigen Hooks.

## Eingebaute Sets entfernen

```php
/**
 * Implements hook_dxpr_builder_icon_sets_alter().
 */
function mymodule_dxpr_builder_icon_sets_alter(array &$icon_sets) {
  // Remove ET Line Icons from the picker.
  unset($icon_sets['et']);
}

```

## Set prüfen

1. Cache leeren: `drush cr`.
2. Seite im Builder öffnen und Icon-Element hinzufügen.
3. Icon-Auswahl öffnen und Ihr Set im Dropdown wählen.
4. Icon wählen, speichern und die Seite in einem privaten Browserfenster betrachten, um zu bestätigen, dass das Icon rendert.