CODEWITHSUNDEEP
angularfont-awesomeangular-material2
INFOSYS
INFOSYS

Reputation: 1585

How to have a Angular Material dropdown populated with icons instead of text

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.

Something like:

enter image description here

enter image description here

I am using Template Driven forms and Angular Material beta version using md instead of mat components.

This is what I tried untill now:

<md-select placeholder="Icon" [(ngModel)]="actionHook.icon" name = "icon">
  <md-option *ngFor="let icon of icons" [value]="icon.value">
    <img class="fa-address-book"/>
  </md-option>
</md-select>

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?

Upvotes: 2

Views: 1597

Answers (1)

Vega
Vega

Reputation: 28711

<img> tag needs src attribute in order to work:

<img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

If you wish to use fontawesome classes then use <i> or ' tags: 

...
    <i class="fa-address-book"></i>
...

or

...
    <span class="fa-address-book"></span>
...

Here is a working demo with md prefixes

Upvotes: 1

Related Questions