How to use md-icon with md-autocomplete in Angular-Material Design?

This is not yet posible with angular-material (out of the box). See this closed issue.

As a workaround, you can do somethihg similar with a bit of custom CSS.

See an example on this working plunker.

HTML: (note id and md-input-name)

<md-autocomplete id="custom" md-input-name="autocompleteField".../>

CSS:

#custom input[name="autocompleteField"]  {
    background: url(images/search.icon.png);
    background-repeat: no-repeat;
    background-position: 5px 7px;
    padding: 0px 35px;
}

Hope it helps.

As this is one of the top links when someone is looking to add icon to angular material autocomplete

If you want to do the same using new angular material, it can be easily done by using mat-icon after input field

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
      <mat-icon matSuffix>search</mat-icon>
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

stackblitz link with an example https://stackblitz.com/angular/kbmrnjeydjm