---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/development/icon-sets'
title: 'Set di icone personalizzati | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:04:20+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Il selettore di icone offre 14 set di icone integrati. Aggiungi i tuoi con un
  file YAML nel tuo modulo o tema, oppure cambia l’elenco con un hook alter.
  Il modulo unisce tutti i file *.dxpr_icon_sets.yml trovati nei
  moduli e temi attivi, poi esegue l’hook.
  Set integrati
  Da 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: 'Set di icone personalizzati'
      description: |-
        Il selettore di icone offre 14 set di icone integrati. Aggiungi i tuoi con un
        file YAML nel tuo modulo o tema, oppure cambia l’elenco con un hook alter.
        Il modulo unisce tutti i file *.dxpr_icon_sets.yml trovati nei
        moduli e temi attivi, poi esegue l’hook.
        Set integrati
        Da 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-24T03:04:20+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/it/hc/documentation/learn-dxpr-builder/development/icon-sets'
      articleSection: 'Bouw erop voort'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/development/icon-sets'
      description: |-
        Il selettore di icone offre 14 set di icone integrati. Aggiungi i tuoi con un
        file YAML nel tuo modulo o tema, oppure cambia l’elenco con un hook alter.
        Il modulo unisce tutti i file *.dxpr_icon_sets.yml trovati nei
        moduli e temi attivi, poi esegue l’hook.
        Set integrati
        Da dxpr_builder.dxpr_icon_sets.yml:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[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) # Set di icone personalizzati.

 Learn DXPR BuilderExtendBouw erop voort

   ## In this guide

Il selettore di icone offre 14 set di icone integrati. Aggiungi i tuoi con un file YAML nel tuo modulo o tema, oppure cambia l’elenco con un hook alter. Il modulo unisce tutti i file `*.dxpr_icon_sets.yml` trovati nei moduli e temi attivi, poi esegue l’hook.

## Set integrati

Da `dxpr_builder.dxpr_icon_sets.yml`:

| Chiave | Etichetta | Prefisso |
|---|---|---|
| `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` |

Un profilo builder può limitare quali set vedono i suoi editor (**Icon sets** nel form del profilo).

## Rilevamento YAML (consigliato)

Crea `mymodule.dxpr_icon_sets.yml` nella root del tuo modulo o tema:

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

```

Un set con la stessa chiave di uno precedente lo sostituisce.

### Proprietà

| Proprietà | Obbligatoria | Descrizione |
|---|---|---|
| `label` | Sì | Nome nel menu a discesa dei set di icone; quando manca si usa la chiave |
| `prefix` | Sì | Prefisso delle classi CSS che identifica le icone di questo set |
| `css` | Sì | Foglio di stile caricato dall’editor; un percorso relativo è risolto dalla root del tuo modulo o tema |
| `library` | Sì | Libreria Drupal collegata per i visitatori quando i contenuti salvati usano questo set |
| `icon_prefix` | No | Prefisso del nome dell’icona quando differisce da `prefix`, come in `fas fa-heart` |
| `icons` | Sì\* | Elenco completo delle classi di icone |

\*I set integrati omettono `icons`; l’editor ne ha gli elenchi in JavaScript. Il tuo set deve elencare ogni icona.

## Definizione di libreria Drupal

Registra il foglio di stile come libreria in `mymodule.libraries.yml`, così i visitatori lo ricevono nelle pagine che usano le tue icone:

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

```

Il modulo collega una libreria con una `/` nel nome solo quando è la `library` di un set di icone registrato.

## Hook alter

Per logica runtime, come aggiungere un set solo a una condizione, implementa `hook_dxpr_builder_icon_sets_alter()`. L’hook gira dopo che i percorsi YAML sono risolti, quindi dai a `css` un percorso dalla root di Drupal:

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

```

Vedi [Riferimento API hook](/it/hc/documentation/learn-dxpr-builder/development/hooks-api) per gli altri hook.

## Rimuovere i set integrati

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

```

## Verifica il tuo set

1. Svuota la cache: `drush cr`.
2. Apri una pagina nel builder e aggiungi un elemento Icon.
3. Apri il selettore di icone e scegli il tuo set nel menu a discesa.
4. Scegli un’icona, salva e guarda la pagina come visitatore per confermare che l’icona si renderizza.