PrimeNG Angular 10 - 如何在 p-autoComplete 中添加图标

Question

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

Answer 1

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.

Answer 2

there is a Property " dropdownIcon " takes the name of an icon the default "pi pi-chevron-down".

 <p-autoComplete
              [group]="true"
              field="label"
              [multiple]="true"
              [dropdown]="true"
              dropdownIcon="pi pi-search"
            >