[SOLVED] How to add md-icon in md-option?

How to add md-icon in md-option?

I am new to angularJS, Can anyone answer me how to add md-icon in md-option?

I tried <md-option>ABC <md-icon>delete</md-icon></md-option> but it will give output like this when selected

"ABCdelete"

any solution of this ??

Solution

Here's a small example showing the use of <md-icon> inside an <md-option> directive, just to prove it works. I believe you may be missing a stylesheet or script reference which is causing it to display text instead of the actual 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>