How to use keydown event inside <i> instead of button

Question

<button class="fa fa-caret-down font-size-18px" style="border: none"
  #pop="bs-popover"
  [popover]="fil"
  placement="bottom right"
  [adaptivePosition]="true"
  [outsideClick]="true"
  (keydown)="keydownEvent($event,pop)">
</button>

In my angular application, I am using a button which will open a popover. But I want it to be a tag or something other than a button because the button will be activated when we press space or enter keys which I don't want. The code should be like this:

<i class="fa fa-caret-down font-size-18px" style="border: none"
  #pop="bs-popover"
  [popover]="fil"
  placement="bottom right"
  [adaptivePosition]="true"
  [outsideClick]="true"
  (keydown)="keydownEvent($event,pop)">
</i>

But this will not trigger the keydown event. What might be the reason for it what are the alternatives? Thanks