Embedded lightning-icon onclick event not working

I'm trying to embed an lightning-icon in an lightning-input field to hide/display the password value.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-3">Password</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
     <lightning-input required type="password" value={password} onchange={handlePasswordChange} maxlength="64" minlength="8" style="font-weight:bold;"></lightning-input>
     <lightning-icon onclick={togglePw} size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:hide"></lightning-icon>
  </div>
</div>

(Example from: https://www.forcetrails.com/2020/05/how-to-create-lightning-input-with-icon-lwc.html)

In this combination, the onclick event dont fire my togglePw function. (no erros in the js-console)

When I deploy the lightning-icon separately, the event works.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-3">Password</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
     <lightning-input required type="password" value={password} onchange={handlePasswordChange} maxlength="64" minlength="8" style="font-weight:bold;"></lightning-input>
  </div>
</div>

<lightning-icon onclick={togglePw} size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:hide"></lightning-icon>

Why does the event work if it is not embedded

togglePw function:

togglePw() {
    console.log('togglePw');
}