如何在 md-option 中添加 md-icon？

Question

我是angularJS的新手，谁能回答我如何在md-option中添加md-icon？

我试过 <md-option>ABC <md-icon>delete</md-icon></md-option> 但选择后会给出这样的输出

"ABCdelete"

有什么解决办法吗？？

Answer 1

与任何其他子元素一样

清除

Answer 2

你必须告诉 md-icon 你需要使用哪个图标。

像这样使用：

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Answer 3

这里有一个小例子，展示了在 <md-option> 指令中使用 <md-icon>，只是为了证明它有效。我相信您可能缺少样式表或脚本引用，这导致它显示文本而不是实际图标。

angular.module('app', ['ngMaterial', 'ngAnimate', 'ngAria'])
  .controller('ctrl', function() {
    this.commuteTypes = [{
        description: 'Walk',
        icon: 'directions_walk'
      },
      {
        description: 'Bus',
        icon: 'directions_bus'
      },
      {
        description: 'Drive',
        icon: 'directions_car'
      }
    ];

    this.commuteType = null;
  });

<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.18/angular-material.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular-aria.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.18/angular-material.min.js"></script>
<div ng-app="app" ng-controller="ctrl as $ctrl">
  <div layout="row" layout-padding>
    <md-select placeholder="Commute" ng-model="$ctrl.commuteType">
      <md-option ng-repeat="commute in $ctrl.commuteTypes" ng-value="commute">
        <md-icon>{{ commute.icon }}</md-icon> {{ commute.description }}
      </md-option>
    </md-select>
  </div>
</div>

如何在 md-option 中添加 md-icon？

How to add md-icon in md-option?

angularjs

md-select