htmlcssangularprimeng

PrimeNG Angular 10 - How to add an icon in p-autoComplete

Is there a way to add an icon inside primeng p-autoComplete?

<div class="p-mr-2 p-input">
   <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location"
     [suggestions]="results" field="name" placeholder="Search location"> 
   </p-autoComplete>
 </div>

I am looking for a way to add a location icon inside this auto-complete element

Solution

  • PrimeNg provides InputGroup option which can be used to add icon for input.

    <div class="p-mr-2 p-input">
  <div class="p-inputgroup">
    <span class="p-inputgroup-addon">$</span>
    <p-autoComplete styleClass="p-autocomplete-list-item" [(ngModel)]="location [suggestions]="results" field="name" placeholder="Search location"> 
    </p-autoComplete>
  </div>
</div>

    Here instead of $ add required location icon.