如何在Angular-Material Design中使用md-icon和md-autocomplete?

raj*_*alx 12 material-design angular-material

有没有办法在md-autocomplete中放置md-icon

   <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>
Run Code Online (Sandbox Code Playgroud)

codepen

tro*_*oig 11

这还不具备角度材料(开箱即用).看到这个封闭的问题.

作为一种解决方法,您可以使用一些自定义CSS做类似的事情.

查看这个工作的plunker的例子.

HTML :(注意idmd-input-name)

<md-autocomplete id="custom" md-input-name="autocompleteField".../>
Run Code Online (Sandbox Code Playgroud)

CSS:

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

希望能帮助到你.