title: clarity "clr-icon" - @hostlistener click does not work
body: <p>I added a hostlistener to listen to onclick event. If the event.target.nodename is CLR-ICON, it will call the event emitter.</p>
  <p>When testing it out, I try to click the clr-icon and it doesn't trigger the onclick function defined for the hostListner.</p>
  <pre><code>// 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&lt;boolean&gt; = new EventEmitter&lt;boolean&gt;();
   
    ngAfterViewInit () {
      setTimeout(() =&gt; {
        this.setupDeleteIcon();
      }, 0);
    }
  
   private setupDeleteIcon() {
    const deleteIcon = `
      &lt;clr-icon
          shape=&quot;times-circle&quot;
          style=&quot;color: #0076CE; cursor: pointer&quot;
          class=&quot;is-solid&quot;
          (click)=&quot;onClick($event)&quot;&gt;
      &lt;/clr-icon&gt; 
    `;
  }
  </code></pre>
  <p>As a workaround, I changed to use &quot;document:click&quot; or &quot;body:click&quot; 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.</p>
  <pre><code> // 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);
   }
  </code></pre>
  <p>Is there a way to trigger the function call only when click on the clr-icon?</p>