---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos'
title: 'Conjuntos de iconos personalizados | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:18:32+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  El selector de iconos ofrece 14 conjuntos de iconos integrados. Añades el tuyo con un
  archivo YAML en tu módulo o tema, o cambias la lista con un hook de
  alteración. El módulo fusiona cada archivo *.dxpr_icon_sets.yml que encuentra en
  módulos y temas habilitados, y luego ejecuta el hook.
  Conjuntos integrados
  Desde 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: 'Conjuntos de iconos personalizados'
      description: |-
        El selector de iconos ofrece 14 conjuntos de iconos integrados. Añades el tuyo con un
        archivo YAML en tu módulo o tema, o cambias la lista con un hook de
        alteración. El módulo fusiona cada archivo *.dxpr_icon_sets.yml que encuentra en
        módulos y temas habilitados, y luego ejecuta el hook.
        Conjuntos integrados
        Desde 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-24T11:18:32+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/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos'
      articleSection: 'Desarrollar encima'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/desarrollo/conjuntos-iconos'
      description: |-
        El selector de iconos ofrece 14 conjuntos de iconos integrados. Añades el tuyo con un
        archivo YAML en tu módulo o tema, o cambias la lista con un hook de
        alteración. El módulo fusiona cada archivo *.dxpr_icon_sets.yml que encuentra en
        módulos y temas habilitados, y luego ejecuta el hook.
        Conjuntos integrados
        Desde dxpr_builder.dxpr_icon_sets.yml:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Extender](/es/hc/documentation/learn-dxpr-builder/extend) /[Desarrollar encima](/es/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Conjuntos de iconos personalizados.

 Aprende DXPR BuilderExtenderDesarrollar encima

   ## En esta guía

El selector de iconos ofrece 14 conjuntos de iconos integrados. Añades el tuyo con un archivo YAML en tu módulo o tema, o cambias la lista con un hook de alteración. El módulo fusiona cada archivo `*.dxpr_icon_sets.yml` que encuentra en módulos y temas habilitados, y luego ejecuta el hook.

## Conjuntos integrados

Desde `dxpr_builder.dxpr_icon_sets.yml`:

| Clave | Etiqueta | Prefijo |
|---|---|---|
| `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 perfil del constructor puede limitar qué conjuntos ven sus personas que editan (**Icon sets** en el formulario de perfil).

## Descubrimiento YAML (recomendado)

Crea `mymodule.dxpr_icon_sets.yml` en la raíz de tu módulo 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 conjunto con la misma clave que uno anterior lo reemplaza.

### Propiedades

| Propiedad | Obligatorio | Descripción |
|---|---|---|
| `label` | Sí | Nombre en el desplegable de conjuntos de iconos; la clave se usa cuando falta |
| `prefix` | Sí | Prefijo de clase CSS que identifica iconos de este conjunto |
| `css` | Sí | Hoja de estilos que el editor carga; una ruta relativa se resuelve desde la raíz de tu módulo o tema |
| `library` | Sí | Biblioteca Drupal adjunta para visitas cuando el contenido guardado usa este conjunto |
| `icon_prefix` | No | Prefijo del nombre de icono cuando difiere de `prefix`, como en `fas fa-heart` |
| `icons` | Sí\* | Lista completa de clases de iconos |

\*Los conjuntos integrados omiten `icons`; el editor tiene sus listas en JavaScript. Tu propio conjunto debe enumerar cada icono.

## Definición de biblioteca Drupal

Registra la hoja de estilos como biblioteca en `mymodule.libraries.yml`, para que las visitas la reciban en páginas que usan tus iconos:

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

```

El módulo adjunta una biblioteca con `/` en su nombre solo cuando es el `library` de un conjunto de iconos registrado.

## Hook de alteración

Para lógica en tiempo de ejecución, como añadir un conjunto solo bajo alguna condición, implementa `hook_dxpr_builder_icon_sets_alter()`. El hook se ejecuta después de que las rutas YAML se resuelven, así que dale a `css` una ruta desde la raíz 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'],
    ];
  }
}

```

Consulta [Referencia de la API de hooks](/es/hc/documentacion/aprender-dxpr-builder/desarrollo/api-hooks) para ver los demás hooks.

## Quitar conjuntos integrados

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

```

## Comprueba tu conjunto

1. Limpia la caché: `drush cr`.
2. Abre una página en el constructor y añade un elemento Icon.
3. Abre el selector de iconos y elige tu conjunto en el desplegable.
4. Escoge un icono, guarda, y mira la página como visita para confirmar que el icono se renderiza.