--- url: 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/integrations/media-library' title: 'Eigene Icon-Sets | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T08:33:36+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Der Icon-Picker bietet 14 eingebaute Icon-Sets. Eigene fügen Sie mit einer YAML-Datei in Ihrem Modul oder Theme hinzu oder ändern die Liste mit einem Alter-Hook. Das Modul führt jede gefundene *.dxpr_icon_sets.yml-Datei in aktivierten Modulen und Themes zusammen und ruft dann den Hook auf. Eingebaute Sets Aus dxpr_builder.dxpr_icon_sets.yml: tags: - 'Drupal-functies koppelen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T09:09:48+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: |- Der Icon-Picker bietet 14 eingebaute Icon-Sets. Eigene fügen Sie mit einer YAML-Datei in Ihrem Modul oder Theme hinzu oder ändern die Liste mit einem Alter-Hook. Das Modul führt jede gefundene *.dxpr_icon_sets.yml-Datei in aktivierten Modulen und Themes zusammen und ruft dann den Hook auf. 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-24T08:33:36+0000' dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/integrations/media-library' articleSection: 'Drupal-functies koppelen' - '@type': WebPage '@id': 'https://dxpr.com/de/hc/documentation/learn-dxpr-builder/integrations/media-library' description: |- Der Icon-Picker bietet 14 eingebaute Icon-Sets. Eigene fügen Sie mit einer YAML-Datei in Ihrem Modul oder Theme hinzu oder ändern die Liste mit einem Alter-Hook. Das Modul führt jede gefundene *.dxpr_icon_sets.yml-Datei in aktivierten Modulen und Themes zusammen und ruft dann den Hook auf. 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 --- [Help Center](/de/hc)/[Documentation](/de/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Drupal-functies koppelen](/hc/documentation/learn-dxpr-builder/integrations) # Eigene Icon-Sets. Learn DXPR BuilderManage the siteDrupal-functies koppelen ## In this guide Related guides - [Bilder mit dem Entity Browser wählen](/de/hc/documentation/learn-dxpr-builder/integrations/entity-browser) Der Icon-Picker bietet 14 eingebaute Icon-Sets. Eigene fügen Sie mit einer YAML-Datei in Ihrem Modul oder Theme hinzu oder ändern die Liste mit einem Alter-Hook. Das Modul führt jede gefundene `*.dxpr_icon_sets.yml`-Datei in aktivierten Modulen und Themes zusammen und ruft dann den Hook auf. ## 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 einschränken, welche Sets die Redaktion sieht (**Icon sets** auf dem Profilformular). ## YAML-Discovery (empfohlen) Erstellen Sie `mymodule.dxpr_icon_sets.yml` im 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 verwendet | | `prefix` | Ja | CSS-Klassenpräfix, das Icons dieses Sets kennzeichnet | | `css` | Ja | Stylesheet, das der Editor lädt; ein relativer Pfad wird vom Root Ihres Moduls oder Themes aufgelöst | | `library` | Ja | Drupal-Library, die für Besucher eingebunden wird, wenn gespeicherte Inhalte dieses Set nutzen | | `icon_prefix` | Nein | Präfix des Icon-Namens, wenn es von `prefix` abweicht, wie in `fas fa-heart` | | `icons` | Ja\* | Vollständige Liste der Icon-Klassen | \*Die eingebauten Sets lassen `icons` weg; der Editor hat ihre Listen in JavaScript. Ihr eigenes Set muss jedes Icon auflisten. ## Drupal-Library-Definition Registrieren Sie das Stylesheet als Library in `mymodule.libraries.yml`, damit Besucher es auf Seiten erhalten, die Ihre Icons nutzen: ```yaml material_symbols: css: theme: vendor/material-symbols/material-symbols.css: {} ``` Das Modul bindet eine Library mit einem `/` im Namen nur ein, wenn sie die `library` eines registrierten Icon-Sets ist. ## Alter-Hook Für Laufzeitlogik, etwa um ein Set nur unter einer Bedingung hinzuzufügen, implementieren Sie `hook_dxpr_builder_icon_sets_alter()`. Der Hook läuft, nachdem YAML-Pfade aufgelöst wurden; geben Sie `css` daher einen Pfad ab dem Drupal-Root an: ```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/documentation/learn-dxpr-builder/development/hooks-api) für die weiteren 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']); } ``` ## Ihr Set prüfen 1. Leeren Sie den Cache: `drush cr`. 2. Öffnen Sie eine Seite im Builder und fügen Sie ein Icon-Element hinzu. 3. Öffnen Sie den Icon-Picker und wählen Sie Ihr Set im Dropdown. 4. Wählen Sie ein Icon, speichern Sie und betrachten Sie die Seite als Besucher, um zu bestätigen, dass das Icon rendert.