How to implement angular 7 drop-down with images?

Question

I\'m creating angular 7 app, and using mat-select for drop-down. Now i want add image within each item of the mat-select

See the image below:

Answer 1

Ensure you have images in the array which you're providing in the mat-option; then, create an image tag and provide the image source to it.

relevant HTML:

Basic mat-select with images

  Favorite food
  
    
       {{food.viewValue}}
    
  

relevant TS:

import { Component } from '@angular/core';

export interface Food {
  value: string;
  viewValue: string;
  img: string;
}

@Component({
  selector: 'select-overview-example',
  templateUrl: 'select-overview-example.html',
  styleUrls: ['select-overview-example.css'],
})
export class SelectOverviewExample {
  foods: Food[] = [
    { value: 'steak-0', viewValue: 'Steak', img: 'https://www.akberiqbal.com/favicon-32x32.png' },
    { value: 'pizza-1', viewValue: 'Pizza', img: 'https://www.akberiqbal.com/favicon-16x16.png' },
    { value: 'tacos-2', viewValue: 'Tacos', img: 'https://www.akberiqbal.com/favicon-96x96.png' }
  ];
}

complete working stackblitz here