Add field
Navigation to configuration
Settings
Sources
Source configuration
Manage form configuration
Manage form configuration - select source
Manage display
Manage display - source mode
Selected symbol on forms
Field on forms - filtering
Field on forms - filtering
HTML render

This project is not covered by Drupal’s security advisory policy.

Symbols Field provides a Drupal field type, widget, and formatter for selecting and rendering icon-like symbols.

The module stores both the selected symbol value and the symbol source. This allows a site to use one default icon set, or several
configurable icon sources, without hard-coding a single library into the field type.

Features

  • Field type that stores a symbol source and symbol value.
  • Configurable symbol sources as Drupal configuration entities.
  • Built-in Material Symbols source.
  • Picker widget with search.
  • Formatter with decorative and accessible rendering options.
  • Support for ligature-based icon fonts and CSS class-based icon libraries.
  • Library loading through external URLs, local URLs, Drupal libraries, or already-loaded assets.

Post-Installation

After installation, go to Configuration > Content authoring > Symbols Field, or open

/admin/config/
  symbols-field

The module also provides a source administration page at /admin/config/symbols-field/sources.

To use the module, add a new field to an entity type, select the Symbol field type, configure the form display to
use the Symbol picker widget, and configure the view display to use the Symbol formatter.

Additional Requirements

This module requires Drupal 10 or Drupal 11 and the Drupal core Field module.

The default Material Symbols source loads its stylesheet from Google Fonts unless the site administrator changes the source to use a
local URL, Drupal library, or already-loaded asset.

No additional Drupal modules are required.

The module includes a default Material Symbols source and can also be configured for class-based icon libraries such as Bootstrap
Icons or Font Awesome Web Fonts + CSS.

Supporting organizations: 
Supported initial development, testing, and preparation for contributed release.

Project information

Releases