HTML:
<div class="relative">
  <i
    (click)="bla()"
    class="pi pi-search z-10 absolute cursor-pointer top-1/2 mt-[-0.5rem] text-[var(--p-autocomplete-dropdown-color)]"
  ></i>
  <p-autoComplete
    [hidden]="!isUserLoggedIn() || userRoleId() === UserRoles.Admin"
    minLength="3"
    searchTimeout="300"
    formControlName="search"
    placeholder="Search.."
    [autoHighlight]="true"
    [forceSelection]="true"
    appendTo="body"
    (completeMethod)="onSearch($event)"
    (onSelect)="onSelect($event)"
    [suggestions]="suggestions"
    inputStyleClass="pl-10" // pay attention for this
  >
  </p-autoComplete>
</div>




CSS:
.pi-search  {
  &::before {
    @apply p-2.5; // increases clickable area, as **before** propagates click event to parent(i element)
  }
}