Add variables in custom input template

Question

In D8 I created a custom input twig file (based on input.html.twig) :

{{ icon }}

<input{{ attributes }} />{{ children }}

Then I created a new entry in hook_theme() :

function my_module_theme() {
 return [
   'input_custom' => [
     'render element' => 'form',
     'variables' => [
       'icon' => NULL,
     ],
     'template' => 'input-custom',
   ],
 ];
}

Then I'm loaded the template in my form element :

$form['my_field'] = [
        '#type' => 'textfield',
        '#theme' => 'input_custom',
        '#icon' => 'my_icon',
        '#title' => $this->t('My title'),
      ];

My custom variable is sent to the template but I lost all html attributes on the input. If I remove variables from my_module_theme() all html attributes are back, but I'm losing my custom variable.

How can I send custom variables in custom input template ?

Answer 1

Declare a #theme starting with the base hook of the input element and a double underscore:

  $form['my_field'] = [
    '#type' => 'textfield',
    '#theme' => 'input__custom',
    '#icon' => 'my_icon',
    '#title' => $this->t('My title'),
  ];

Prepare additional variables in a preprocess hook:

function mytheme/mymodule_preprocess_input(&$variables) {
  if ($variables['theme_hook_original'] == 'input__custom') {
    $variables['icon'] = $variables['element']['#icon'];
  }
}

Then you can use the added variables in the input template:

{{ icon }}

Answer 2

Update : this solution is not working because the form element becomes a theme element.

I just realize that I'm taking the problem in the wrong way... I should use a custom template where I will load my input and not the opposite.

Like this I don't need to override a core element.

Twig file :

{{ icon }}

{{ input }}

Hook_theme :

function my_module_theme() {
  return [
    'input_custom' => [
      'variables' => [
        'icon' => null,
        'input' => null,
      ],
      'template' => 'input-custom',
    ],
  ];
}

My form element :

 $form['my_field'] = [
    '#theme' => 'input_custom',
    '#icon' => $labels['icon'],
    '#input' => [
      '#type' => 'textfield',
      '#title' => $this->t('My title'), 
    ],
  ];

Notice : for this solution, I changed my point of view on the issue to make it easier to solve. Technically even if this is working, as @4k4 said this is not answering totally the beginning question.