Custom UX icons with TogglePassword

[davidnectarestudio]

Hi.

It is possible to use ux_icon value as config parameter in visible_icon?

I've this UX icon available:

{{ ux_icon('bi:lock') }}

And I need to apply this inside my config form builder:

            ->add(
                'plainPassword',
                PasswordType::class,
                [
                    'label' => 'password',
                    'required' => false,
                    'mapped' => false,
                    'toggle' => true,
                    'visible_icon' => 'bi:lock',
                    'attr' => [
                        'data-password-generator-target' => 'password',
                        'autocomplete' => 'new-password',
                    ],
                ]
            )

[sergio-santiago]

Using custom UX icons with TogglePassword

Yes ✅ — you can use your own icon (e.g. bi:lock) as the value of the visible_icon option.
The TogglePassword form theme simply forwards that value to ux_icon().

Example:

->add('plainPassword', PasswordType::class, [
    'label' => 'Password',
    'required' => false,
    'mapped' => false,
    'toggle' => true,
    'visible_icon' => 'bi:lock',       // <-- your custom icon identifier
    'hidden_icon'  => 'bi:eye-slash',  // optional, for when password is hidden
    'attr' => [
        'data-password-generator-target' => 'password',
        'autocomplete' => 'new-password',
    ],
])

And in Twig:

{{ form_row(form.plainPassword) }}

This will render the toggle with ux_icon('bi:lock') when the password is visible.
You can set any icon name supported by UX Icons (Heroicons, Bootstrap Icons, …),
or configure defaults via a custom form theme override if you want to apply it globally.

---

👉 In short:

• visible_icon / hidden_icon accept the same string you’d pass to ux_icon().
• No extra config needed — just provide the icon identifier.

[davidnectarestudio]

which version do you use? I only see a rendered plain text label (bi:lock)

[sergio-santiago]

I'm on symfony/ux-toggle-password 2.30.0 with symfony/ux-icons 2.x.

In 2.x, visible_icon / hidden_icon expect raw SVG markup, not an icon identifier.
The Stimulus controller reads the data-*-icon-value and injects it into innerHTML as-is.
So passing 'bi:lock' renders the literal text bi:lock.

Workaround: render the SVG via ux_icon() in Twig (e.g. through a small form theme override that
converts bi:* to ux_icon('bi:*')|raw) or use the migration approach suggested in the README.

[davidnectarestudio]

Finally, I decided to avoid symfony/ux-toggle-password due to has been deprecated. I've implemented the migration example with my custom icons.

Thx.