Iconify Field

The Iconify Field module for Drupal allows you to easily add SVG icons to any type of content, using the amazing Iconify project.

The main module provides a new field type for selecting icons from any collection of Iconify icons. The resulting icon or icons will be rendered in SVG form on the frontend, without the need for any client-side JavaScript.

Additionally, there's a submodule called "Iconify Field: CKEditor", which adds CKEditor integration.

Iconify Field

Provides a field for selecting and storing icons.

Other than just providing a field directly, the module is made to be highly modular. This allows a developer to use most of the API in their own custom modules.

Twig function

The main module provides a Twig function to easily embed an icon by name into a page. The function name is iconify_field. Currently there is only one parameter:

• icon_name
  • The collection and name of the icon, in the format <COLLECTION>:<NAME>

Example:

{{ iconify_field('mdi:account') }}

It's also possible to add arbitrary attributes as a separate argument. For example:

{{ iconify_field('mdi:account', {
  class: 'icon'
}) }}

Form element

If you have a custom form, and want to create an icon picker, there is a form element available. There are two optional parameters:

• default_collection
  • Optional. The pre-selected collection. Will fall back to the first available collection if the choice is invalid.
• collections
  • Optional. The allowed collections. All collections are allowed if this is empty or unset.
  • If only one collection is selected, the collection dropdown will be hidden in the icon picker.

Example:

$form['icon'] = [
  '#type' => 'iconify_field',
  '#default_collection' => 'mdi',
  '#collections' => [
    'mdi',
    'tabler',
  ],
  '#default_value' => 'mdi:account',
];

Render element

If you need to render an icon in a render array, there is a render element available. There is one parameter:

• icon
  • The collection and name of the icon, in the format <COLLECTION>:<NAME>
• attributes
  • Optional. Additional parameters to pass to the icon

Example:

$render['icon'] = [
  '#type' => 'iconify_icon',
  '#icon' => 'mdi:account',
  '#attributes' => [
    'class' => 'icon',
  ],
];

Iconify Field: CKEditor

This submodule provides a CKEditor plugin to insert an icon.

Some additional options can be specified in the CKEditor plugin settings, when the button is added to the toolbar.