title: How to have a Angular Material dropdown populated with icons instead of text
body: <p>I have a Template Driven Form and I want one of the dropdowns to have a font awesome icon list to appear but I am not able to do so.</p>
  
  <p>Something like:</p>
  
  <p><a href="https://i.stack.imgur.com/h6tnR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h6tnR.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/YTpiY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YTpiY.png" alt="enter image description here"></a></p>
  
  <p>I am using Template Driven forms and Angular Material beta version using md instead of mat components. </p>
  
  <p>This is what I tried untill now:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;md-select placeholder="Icon" [(ngModel)]="actionHook.icon" name = "icon"&gt;
    &lt;md-option *ngFor="let icon of icons" [value]="icon.value"&gt;
      &lt;img class="fa-address-book"/&gt;
    &lt;/md-option&gt;
  &lt;/md-select&gt;
  </code></pre>
  
  <p>But it dosent show up, Even if I cannot get it in a nested form. How to get it in a single dropdown with all icons where the value is class name and the display is the icon image?</p>