Angular material put image on selected value of

Question

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.

Ca

Answer 1

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

HTML

  
    None
    Option 1
      

          
    Option 2
      

    

    Option 3
  

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