Add a search icon placeholder inside ng-select instead of placeholder text?

Question

I am using ng-select library to display a drop down in my angular web app.

    <ng-select
      [items]="flattenedSelectList"
      bindLabel="displayName"
      placeholder="Select specialty"
      notFoundText="No results found. Please try a different search criteria."
      bindValue="id"
      [searchFn]="onSearch"
      groupBy="type"
      [(ngModel)]="selectedSpecialtyId">
      <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
        <span [ngOptionHighlight]="search" [title]="item.displayName">
        {{item.displayName}}
        </span>
        <div class='provider-specialty' *ngIf="shouldShowDepartmentName(item)">
          {{getAreasOfExpertise(item)}}
        </div>
      </ng-template>
    </ng-select>

Instead of the placeholder text "Select specialty", I would like to place a search icon inside the search box. How can I achieve that?

Answer 1

Placeholders in ng-select are rendered in div tag with class ng-placeholder assigned. You can do some css to add search icon in the place holder instead of text.

Something like this.

  .custom ::ng-deep .ng-placeholder::before{
       font-family: FontAwesome;
       content: "\f002";
}

I've used FontAwesome fonts library and given the search icon code in the content property (make sure you have this library (or any other library material-design, themefy etc) referenced in your project). (You could use a custom icon, a png, jpg as background whatever approach you prefer).

My ng-select element would look like this

       <ng-select [items]="flattenedSelectList" class="custom" ...></ng-select>

Note I don't have placeholder property in the ng-select element now.

Hope it helps.

Thanks.