angularjsmd-select

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>