Problem/Motivation
In Drupal 11.1, we have shipped #3471494: Add an icon management API without a Form Element in order to test what can be done in contrib first.
We have now 2 form elements built on the Icon API in contrib, from the same module. Other modules implements the Core Icon API but they don't provide (yet) a dedicated Form Element.
icon_autocomplete
Properties:
- #default_value: (string) Icon value as pack_id:icon_id.
- #show_settings: (bool) Enable extractor settings, default FALSE.
- #default_settings: (array) Settings for the extractor settings.
- #settings_title: (string) Extractor settings details title.
- #allowed_icon_pack: (array) Icon pack to limit the selection.
- #return_id: (bool) Form return icon id instead of icon object as default.
Some base properties from FormElementBase:
- #description: (string) Help or description text for the input element.
- #placeholder: (string) Placeholder text for the input, default to 'Start typing icon name'.
- #required: (bool) Whether or not input is required on the element.
- #size: (int): Textfield size, default 55.
Example:
[
'#type' => 'icon_autocomplete',
'#title' => $this->t('Select icon'),
'#default_value' => 'my_icon_pack:my_default_icon',
'#allowed_icon_pack' => [
'my_icon_pack',
'other_icon_pack',
],
'#show_settings' => TRUE,
];
icon_picker
Properties:
- #default_value: (string) Icon value as pack_id:icon_id.
- #show_settings: (bool) Enable extractor settings, default FALSE.
- #default_settings: (array) Settings for the extractor settings.
- #settings_title: (string) Extractor settings details title.
- #allowed_icon_pack: (array) Icon pack to limit the selection.
- #return_id: (bool) Form return icon id instead of icon object as default.
Some base properties from FormElementBase.
- #description: (string) Help or description text for the input element.
- #placeholder: (string) Placeholder text for the input, default to 'Click to select an Icon'.
- #required: (bool) Whether or not input is required on the element.
- #size: (int): Textfield size, default 55.
Global properties applied to the parent element:
- #attributes': (array) Attributes to the global element.
Example:
[
'#type' => 'icon_picker',
'#title' => $this->t('Select icon'),
'#default_value' => 'my_icon_pack:my_default_icon',
'#allowed_icon_pack' => [
'my_icon_pack',
'other_icon_pack',
],
'#show_settings' => TRUE,
];
Other form elements to study
They are not implementing (yet) the Icon API:
- iconset : IconsetSelector
- icons: IconSelect
- ex_icons : ExIconSelect
- micon (icomoon) : Micon
- md_fontello : MDIcon
- iconify_field : IconifyField
They are already implementing the Icon API but not at the Form Element level:
- iconify_icons : IconifyIcons
Proposed resolution
Add a Form Element for the icon API in Core, maybe inspired by one of those examples.
If possible, let's keep it simple, dependency free, and theme agnostic.
Also, let's notice the Form Elements may be impacted by #3508641: Define form elements from SDC the next months/years, so let's manage the callbacks in a way we can move to SDC later.
User interface changes
No, the form element is not used by default in Druapl Core. It will be available for Contrib modules (which will still be able to add their owns).
API changes
Only additions.
| Comment | File | Size | Author |
|---|---|---|---|
| #9 | icon_autocomplete.png | 10.92 KB | gxleano |
| #9 | icon_autocomplate.gif | 763.33 KB | gxleano |
Issue fork drupal-3528969
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
larowlanComment #3
pdureau commentedComment #4
pdureau commentedCurrently trying to get feedbacks from contrib module maintainers:
Comment #5
quietone commentedComment #6
mogtofu33 commentedAdded a grid view on the icon_autocomplete, it add 2 new attributes:
Could make icon_picker obsolete for now, need discussion.
Comment #9
gxleano commentedIn order to test this implementation, we would need to create a new element like:
Evidences:

Comment #10
gxleano commentedIn order to have a bunch of icons to test this new implementation, I have provide the iconsets using https://www.drupal.org/project/iconify_icons
2.0.x, in this case we would just need to:1. Enable the module
2. Go to
/admin/config/iconify_icons/settingsand select the iconsets which we would like to use.It can be even tested with core iconsets, like navigation. In this case, we would just need to enable the Navigation module and it will be available to be used in the
icon_autocompleteform elementComment #11
pdureau commentedJean, can you have a look?
Comment #12
needs-review-queue-bot commentedThe Needs Review Queue Bot tested this issue. It fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".
This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.
Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.
Comment #14
pdureau commentedComment #15
pdureau commentedRebased & squashed (the previous HEAD has been tagged
previous/3528969-add-form-elements/2026-04-2)Pipeline is red. David (@gxleano), you can assign to you if you want to check.
Comment #16
gxleano commentedSure, I will try to check this during Drupal Dev Days Athens
Comment #17
gxleano commentedComment #18
larowlanLeft some comments on the MR
Comment #19
gxleano commentedComment #20
jatingupta40 commentedComment #21
gxleano commentedThanks to think on work on this @jatingupta40!
But seems like we are almost done on review from @larowlan
Comment #22
gxleano commentedComment #23
larowlanI think this is ready now
Comment #24
pdureau commentedThat's so great. I will have a last look (by testing with 2 modules already using Icon API: UI Icons & Iconify and commit to main and 11.x.)
Comment #25
pdureau commentedTested with the #3589768: Drupal 12 compatibility branch of UI Icons.
I did this temporary change in
\Drupal\ui_icons\Element\IconAutocomplete:But the Core
icon_autocompleteform element (\Drupal\Core\Render\Element\IconAutocomplete) is always loaded instead of the contrib one anyway. At least it doesn't break.Issue about submitted value
Iconmedia source plugin: Error message: "This value should not be null."Cannot access offset of type string on string in ui_icons_menu_link_alter() (line 159 of ui_icons_menu.module).I guess it is because the value is always submitted as 'pack_id:icon_id', but in UI Icons, it is the case only when
#return_idisTRUE, but it isFALSEby default. For information,#return_idis:ui_icons_field(withicon_link_widget),ui_icons_media(in media library),ui_icons_menu(usingicon_link_widget), andui_icons_patternsui_icons_ckeditor5,ui_icons_field(withicon_widget) andui_icons_media(in entity form display)Missing settings form
The icon settings form is missing from Core form element. In UI Icons, it is displayed in
ui_icons_ckeditor5,ui_icons_field(withicon_link_widgetif the setting is TRUE),ui_icons_patternsandui_icons_menu.I understand this decision, it is to keep Core form element simple and avoid the burden of generating a form from JSON schema (something we are still figuring out for SDC). So, it is the role of contrib module like UI Icons to extend the element, adding settings management.
To review
Overriding the element is fixing both the value type issue and the missing setting form:
So UI Icons will still work after this MR is merged. That' a relief, but are we at risk of diverging from the broader Icon API ecosystem by having such divergences in our own implementation?
Jean (@mogtofu33), as both the Icon API expert and the UI Icons lead, are you OK about this MR?
Without any news late Thursday May 14th, I will put the ticket back to RTBC.