typescript - Hur man använder md-icon med md-autocomplete i Angular-Material Design?

Finns det något sätt att placera md-ikon i 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

Svar #1

Detta är ännu inte möjligt med angular-material (direkt ur lådan). Se detta stängda ärende.

Som en lösning kan du göra något liknande med lite anpassad CSS.

Se ett exempel på denna fungerande plunker.

HTML: (notera id och 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;
}

Hoppas det hjälper.

Svar #2

Eftersom detta är en av de bästa länkarna när någon letar efter att lägga till en ikon i Angular Material-autofullständig

Om du vill göra samma sak med nya Angular Material kan det enkelt göras genom att använda mat-icon efter inmatningsfältet

<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-länk med ett exempel https://stackblitz.com/angular/kbmrnjeydjm

Relaterade artiklar