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.

Components

• Field integration with a user-friendly icon picker
• A CKEditor 5 plugin to easily let content editors add icons
• An API to allow developers to integrate any feature in their own custom modules

What does it do?

In short, it 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, a separate module is provided to provide a CKEditor 5 plugin. This makes it easy for content editors to include icons in their content.

Can it do anything else?

It can! Of course, just providing a field type for one or more icons can quickly become very limiting. That is why some helpers are provided alongside the module.

Twig function

You might run into situations where you have custom functionality, and want to embed a single icon in a Twig template. That's where the iconify_field Twig function comes in. Simply provide the collection and name of the icon, and the correct icon will be rendered.

For example:

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

The icon picker is pretty nice, can I use it in my custom form?

Be my guest! It's quite simple to include, since a custom form element is provided with this module.

Here's a code snippet to get you started:

$form['icon'] = [
  '#type' => 'iconify_field',
  '#default_collection' => 'mdi', // Can also be NULL, in which case the first collection will be pre-selected
  '#collections' => [ // Can also be empty, in which case all collections are allowed
    'mdi',
    'tabler',
  ],
  '#default_value' => 'mdi:account',
];