clarity "clr-icon" - @hostlistener click does not work

Question

I added a hostlistener to listen to onclick event. If the event.target.nodename is CLR-ICON, it will call the event emitter.

When testing it out, I try to click the clr-icon and it doesn't trigger the onclick function defined for the hostListner.

// Original Code:

@Directive({ 
  selector: '[deleteIcon]'
})
@HostListener('click', ['$event'])
onClick(event){
  if (event?.target?.nodeName === 'CLR-ICON') {
    console.log(event);
    this.delete.next(true);
  }
}

export class ControlDeleteDirective implements AfterViewInit, OnDestroy {
 @Output()
 delete: EventEmitter<boolean> = new EventEmitter<boolean>();
 
  ngAfterViewInit () {
    setTimeout(() => {
      this.setupDeleteIcon();
    }, 0);
  }

 private setupDeleteIcon() {
  const deleteIcon = `
    <clr-icon
        shape="times-circle"
        style="color: #0076CE; cursor: pointer"
        class="is-solid"
        (click)="onClick($event)">
    </clr-icon> 
  `;
}

As a workaround, I changed to use "document:click" or "body:click" instead, it does call the function but having issue - once the page loads, it auto call the click function even when the wizard is not shown and user have not seen or click on the clr-icon yet.

 // my attempt - looks like it automatically call the click function even though the user have not seen or click on the clr-icon yet.

 @HostListener('document:click', ['$event'])
 if (event?.target?.nodeName === 'CLR-ICON') {
    this.delete.next(true);
 }

Is there a way to trigger the function call only when click on the clr-icon?