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

Question

Is there any way to place md-icon in md-autocomplete

   <md-autocomplete 
       md-selected-item="ctrl.selectedItem"
       md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
       md-search-text="ctrl.searchText"
       md-items="item in ctrl.querySearch(ctrl.searchText)"
       md-item-text="item.display"
       placeholder="What is your favorite US state?">

   <md-icon class="material-icon">search</md-icon> // ofcourse, I think It won't work

  </md-autocomplete>

codepen

Answer 1

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

Answer 2

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.

Answer 3

Another approach could be to append the icon to the md-input-container inside the md-autocomplete. The md-input-container is only appended, if you're using the md-floating-label attribute.

JS: the timeout and the compile was necessary to make the icon appear. By appending the md-icon-left class, the input receives a padding of 36px, like every other md-input-container that has an icon

attrs[vm.name] will use the attribute value as the icon name

  ...
  .directive('appendIcon', appendIcon);

  function appendIcon($timeout, $compile) {
    return {
      restrict: 'A',
      link: function(scope, elem, attrs) {
        var vm = this;
        $timeout(function() {
          var container = angular.element(elem[0].querySelector('md-input-container'));

          container.addClass('md-icon-left');
          var icon = $compile('<md-icon class="material-icons">' + attrs[vm.name] + '</md-icon>')(scope);
          container.append(icon);
        });
      }
    };
  };

HTML: note append-icon="search" and md-floating-label="State"

  <md-autocomplete 
   append-icon="search"
   md-floating-label="State"
   id="custom" flex="" 
   required=""

Here's a codepen: http://codepen.io/eydrian/pen/ZLdgwQ

Answer 4

I prefer the method below, to be able to use .svg icons. Not only can I continue using the Material Design icons, but I can also make buttons out of it, to trigger an event, such as opening a menu etc, giving help info etc.

<div style="float: left; padding: 25px 10px 0 4px;">
    <md-icon md-svg-icon="/images/icons/email.svg" class="input-icon-color"></md-icon>
</div>
<div style="overflow: hidden;">
    <md-autocomplete 
        md-selected-item="ctrl.selectedItem"
        md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
        md-search-text="ctrl.searchText"
        md-items="item in ctrl.querySearch(ctrl.searchText)"
        md-item-text="item.display"
        placeholder="What is your favorite US state?">

        <md-icon class="material-icon">search</md-icon>
    </md-autocomplete>
</div>

The following style is to imitate the color of the .svg icons when used within an <md-input-container>:

<style>
.input-icon-color {
    color: rgba(0,0,0,0.87);
}
</style>