Please Help

in one of the project(Angular) we created our own font icons file and used them using

 @font-face {
  font-family: 'UI';
  src: url('../font/ie-icons.eot?41544403');
  src: url('../font/ie-icons.eot?41544403#iefix') format('embedded-opentype'),
    url('../font/ie-icons.woff2?41544403') format('woff2'),
    url('../font/ie-icons.woff?41544403') format('woff'),
    url('../font/ie-icons.ttf?41544403') format('truetype'),
    url('../font/ie-icons.svg?41544403#ie-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


.ie-pen:before { content: '\e887'; } /* '' */

<a href="javascript:void(0)" (click)="clickHandler()"><i class="ie ie-pen"></i></a>

The click handler is for just  toggle of value

clickHandler() 
{  
  showInput = !showInput
}

in HTML

<span *ngIf="!showInput">  
     {{name}} 
     <a href="javascript:void(0)" (click)="clickHandler()">
       <i class="ie ie-pen"></i>
     </a>
 </span>

<span *ngIf="showInput"><input (blur)="showInput = !showInput" 
                         [(ngModel)]="name">
</span>

the click event is not working in the Firefox browser only.

click is only working on <a> tag area, in which <i> tag not occupied.