Angular Material Put Image On Selected Value Of

I am using angular material in an angular 2 project. I want to put a static image (html element) in the selected value of mat-select. But i didn't find a solution. Can someone he

Solution 1:

when it comes to this or similar situation, I did it that:

<mat-form-field>
     <mat-select [(value)]="selectedLanguage">
       <mat-select-trigger>
         <span class="flag-icon flag-icon-{{ selectedLanguage | lowercase}}"> </span>
       </mat-select-trigger>
       <mat-option *ngFor="let lang of Languages" [value]="lang">
         <span class="flag-icon flag-icon-{{ lang | lowercase}}"></span>
       </mat-option>
     </mat-select>
   </mat-form-field>

of course, inside tags <mat-select-trigger> and ` can be any tags as well img, and they work !!

Solution 2:

By simply adding <img> tag inside <mat-option>. For the selected option use ngClass to set the image as background. You must use one class by option:

HTML

  <mat-select [(value)]="selected" [ngClass]="selected">
    <mat-option>None</mat-option>
    <mat-option value="option1">Option 1
      <img with="10" height="10" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

    </mat-option>      
    <mat-option value="option2">Option 2
      <img with="10" height="10" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">

    </mat-option>

    <mat-option value="option3">Option 3</mat-option>
  </mat-select>

CSS:

.option1{
  background:  url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg")  center / contain no-repeat;
  white-space: nowrap

}


.option2{
  background:  url("https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg")  center / contain no-repeat;
  white-space: nowrap;
  display:inline
}

DEMO

Solution 3:

I recommend putting a <span> within the <mat-select-trigger> and/or <mat-option> elements, then binding html to it after the fashion precribed by this answer.

<mat-select>
  <mat-select-trigger>
    <span [innerHTML]="myHtmlWithImageTag"></span>
  </mat-select-trigger>
  <mat-option *ngFor="let item of items" [value]="item">
    <span [innerHTML]="myHtmlWithImageTag"></span>
  </mat-option>
</mat-select>