---
url: 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/icon-sets'
title: 'Aangepaste pictogrammensets | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:33:15+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  De pictogramkiezer biedt 14 ingebouwde pictogrammensets. Je voegt je eigen toe met een
  YAML-bestand in je module of thema, of wijzigt de lijst met een alter
  hook. De module voegt elk *.dxpr_icon_sets.yml-bestand samen dat hij in
  ingeschakelde modules en thema's vindt, en draait daarna de hook.
  Ingebouwde sets
  Uit dxpr_builder.dxpr_icon_sets.yml:
tags:
  - 'Bouw erop voort'
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: 'Aangepaste pictogrammensets'
      description: |-
        De pictogramkiezer biedt 14 ingebouwde pictogrammensets. Je voegt je eigen toe met een
        YAML-bestand in je module of thema, of wijzigt de lijst met een alter
        hook. De module voegt elk *.dxpr_icon_sets.yml-bestand samen dat hij in
        ingeschakelde modules en thema's vindt, en draait daarna de hook.
        Ingebouwde sets
        Uit 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-24T02:33:15+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/nl/hc/documentation/learn-dxpr-builder/development/icon-sets'
      articleSection: 'Bouw erop voort'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentation/learn-dxpr-builder/development/icon-sets'
      description: |-
        De pictogramkiezer biedt 14 ingebouwde pictogrammensets. Je voegt je eigen toe met een
        YAML-bestand in je module of thema, of wijzigt de lijst met een alter
        hook. De module voegt elk *.dxpr_icon_sets.yml-bestand samen dat hij in
        ingeschakelde modules en thema's vindt, en draait daarna de hook.
        Ingebouwde sets
        Uit dxpr_builder.dxpr_icon_sets.yml:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/nl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: nl
---
[Help Center](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Extend](/hc/documentation/learn-dxpr-builder/extend) /[Bouw erop voort](/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Aangepaste pictogrammensets.

 Learn DXPR BuilderExtendBouw erop voort

   ## In this guide

De pictogramkiezer biedt 14 ingebouwde pictogrammensets. Je voegt je eigen toe met een YAML-bestand in je module of thema, of wijzigt de lijst met een alter hook. De module voegt elk `*.dxpr_icon_sets.yml`-bestand samen dat hij in ingeschakelde modules en thema's vindt, en draait daarna de hook.

## Ingebouwde sets

Uit `dxpr_builder.dxpr_icon_sets.yml`:

| Sleutel | Label | Prefix |
|---|---|---|
| `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` |

Een builderprofiel kan beperken welke sets zijn redacteurs zien (**Icon sets** op het profielformulier).

## YAML-discovery (aanbevolen)

Maak `mymodule.dxpr_icon_sets.yml` in de root van je module of thema:

```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'

```

Een set met dezelfde sleutel als een eerdere vervangt die.

### Eigenschappen

| Eigenschap | Verplicht | Beschrijving |
|---|---|---|
| `label` | Ja | Naam in de dropdown met pictogrammensets; de sleutel wordt gebruikt wanneer die ontbreekt |
| `prefix` | Ja | CSS-klasseprefix die pictogrammen van deze set identificeert |
| `css` | Ja | Stylesheet die de editor laadt; een relatief pad wordt opgelost vanaf de root van je module of thema |
| `library` | Ja | Drupal-library gekoppeld voor bezoekers wanneer opgeslagen inhoud deze set gebruikt |
| `icon_prefix` | Nee | Prefix van de pictogramnaam wanneer die afwijkt van `prefix`, zoals in `fas fa-heart` |
| `icons` | Ja\* | Volledige lijst met pictogramklassen |

\*De ingebouwde sets laten `icons` weg; de editor heeft hun lijsten in JavaScript. Je eigen set moet elk pictogram vermelden.

## Drupal-librarydefinitie

Registreer de stylesheet als library in `mymodule.libraries.yml`, zodat bezoekers hem krijgen op pagina's die je pictogrammen gebruiken:

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

```

De module koppelt een library met een `/` in zijn naam alleen wanneer het de `library` is van een geregistreerde pictogrammenset.

## Alter hook

Voor runtimelogica, zoals een set alleen onder een voorwaarde toevoegen, implementeer je `hook_dxpr_builder_icon_sets_alter()`. De hook draait nadat YAML-paden zijn opgelost, dus geef `css` een pad vanaf de 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'],
    ];
  }
}

```

Zie [Hooks API-referentie](/nl/hc/documentation/learn-dxpr-builder/development/hooks-api) voor de andere hooks.

## Ingebouwde sets verwijderen

```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']);
}

```

## Je set controleren

1. Wis de cache: `drush cr`.
2. Open een pagina in de builder en voeg een Pictogram-element toe.
3. Open de pictogramkiezer en kies je set in de dropdown.
4. Kies een pictogram, sla op en bekijk de pagina als bezoeker om te bevestigen dat het pictogram rendert.