---
url: 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/conjuntos-de-icones'
title: 'Conjuntos de ícones personalizados | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T11:47:58+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  O seletor de ícones oferece 14 conjuntos de ícones incluídos. Adicione os
  próprios com um ficheiro YAML no módulo ou tema, ou mude a lista com um hook de
  alteração. O módulo junta cada ficheiro *.dxpr_icon_sets.yml que encontra em
  módulos e temas ativos e depois corre o hook.
  Conjuntos incluídos
  De 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 ícones personalizados'
      description: |-
        O seletor de ícones oferece 14 conjuntos de ícones incluídos. Adicione os
        próprios com um ficheiro YAML no módulo ou tema, ou mude a lista com um hook de
        alteração. O módulo junta cada ficheiro *.dxpr_icon_sets.yml que encontra em
        módulos e temas ativos e depois corre o hook.
        Conjuntos incluídos
        De 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:47:58+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/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/conjuntos-de-icones'
      articleSection: 'Desenvolver sobre ele'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/conjuntos-de-icones'
      description: |-
        O seletor de ícones oferece 14 conjuntos de ícones incluídos. Adicione os
        próprios com um ficheiro YAML no módulo ou tema, ou mude a lista com um hook de
        alteração. O módulo junta cada ficheiro *.dxpr_icon_sets.yml que encontra em
        módulos e temas ativos e depois corre o hook.
        Conjuntos incluídos
        De dxpr_builder.dxpr_icon_sets.yml:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Início
            item: 'https://dxpr.com/pt-pt'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pt-pt
---
[Centro de ajuda](/pt-pt/node/75)/[Documentação](/pt-pt/hc/documentacao) /[Aprender DXPR Builder](/pt-pt/hc/documentation/learn-dxpr-builder) /[Estender](/pt-pt/hc/documentation/learn-dxpr-builder/extend) /[Desenvolver sobre ele](/pt-pt/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Conjuntos de ícones personalizados.

 Aprender DXPR BuilderEstenderDesenvolver sobre ele

   ## Neste guia

O seletor de ícones oferece 14 conjuntos de ícones incluídos. Adicione os próprios com um ficheiro YAML no módulo ou tema, ou mude a lista com um hook de alteração. O módulo junta cada ficheiro `*.dxpr_icon_sets.yml` que encontra em módulos e temas ativos e depois corre o hook.

## Conjuntos incluídos

De `dxpr_builder.dxpr_icon_sets.yml`:

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

Um perfil do construtor pode limitar que conjuntos os editores veem (**Icon sets** no formulário de perfil).

## Descoberta YAML (recomendado)

Crie `mymodule.dxpr_icon_sets.yml` na raiz do módulo ou 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'

```

Um conjunto com a mesma chave de um anterior substitui-o.

### Propriedades

| Property | Required | Description |
|---|---|---|
| `label` | Yes | Nome na lista de conjuntos de ícones; a chave usa-se quando falta |
| `prefix` | Yes | Prefixo de classe CSS que identifica ícones deste conjunto |
| `css` | Yes | Folha de estilos que o editor carrega; um caminho relativo resolve-se da raiz do módulo ou tema |
| `library` | Yes | Biblioteca do Drupal anexada para visitantes quando o conteúdo guardado usa este conjunto |
| `icon_prefix` | No | Prefixo do nome do ícone quando difere de `prefix`, como em `fas fa-heart` |
| `icons` | Yes\* | Lista completa de classes de ícone |

\*Os conjuntos incluídos omitem `icons`; o editor tem as listas em JavaScript. O conjunto próprio tem de enumerar cada ícone.

## Definição de biblioteca do Drupal

Registe a folha de estilos como biblioteca em `mymodule.libraries.yml`, para os visitantes a receberem em páginas que usam os ícones:

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

```

O módulo anexa uma biblioteca com `/` no nome apenas quando é a `library` de um conjunto de ícones do registo.

## Hook de alteração

Para lógica de execução, como adicionar um conjunto apenas sob alguma condição, implemente `hook_dxpr_builder_icon_sets_alter()`. O hook corre depois de os caminhos YAML serem resolvidos, por isso dê a `css` um caminho da raiz do 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'],
    ];
  }
}

```

Consulte [Referência da API de hooks](/pt-pt/hc/documentacao/aprender-dxpr-builder/desenvolvimento/api-de-hooks) para os outros hooks.

## Remover conjuntos incluídos

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

```

## Verificar o conjunto

1. Limpe a cache: `drush cr`.
2. Abra uma página no construtor e adicione um elemento Icon.
3. Abra o seletor de ícones e escolha o conjunto na lista.
4. Escolha um ícone, guarde, e veja a página como visitante para confirmar que o ícone se apresenta.