How to add md-icon in md-option?

Question

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 ??

Have you referenced the Material Icons stylesheet? What you have shown is valid and should work provided everything is set up properly. — Lex, Apr 16 '19 at 15:00

score 0 · Answer 1 · answered Apr 16 '19 at 14:18

0

Just as any other child element

<md-option ng-repeat="size in sizes" value="{{size}}">

<md-icon>clear</md-icon>

</md-option>

answered Apr 16 '19 at 14:18

bresleveloper

5,940
3
33
47

score 0 · Answer 2 · answered Apr 16 '19 at 14:19

0

You have to tell md-icon which icon you need to use.

Use like this :

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

answered Apr 16 '19 at 14:19

rahim.nagori

636
8
20

This is not the only method for using `` and [the documentation](https://material.angularjs.org/latest/api/directive/mdIcon) clearly shows the ` numerical_character_reference ` template that the OP is using is valid. – Lex Apr 16 '19 at 14:54

score 0 · Accepted Answer · answered Apr 16 '19 at 15:14

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>

How to add md-icon in md-option?

3 Answers3