CODEWITHSUNDEEP
angularangular-material
Kris
Kris

Reputation: 121

Angular material. How to create md-select with icon?

I added icon in md-option and i want to see it with the selected language. Here is my code

<md-select id="countryString" name="countryString"   [(ngModel)]="selectedCountry" >
          <md-option [value]="'en'">
            <img src="../../assets/images/icons/en.png" />Англійська</md-option>
          <md-option [value]="'ua'">
            <img src="../../assets/images/icons/ukr.png" />Українська</md-option>
          <md-option [value]="'ru'">
            <img src="../../assets/images/icons/ru.png" />Російська</md-option>
        </md-select>

I can't show img here my ask with one: https://github.com/angular/material/issues/10694

Upvotes: 0

Views: 1575

Answers (1)

borislemke
borislemke

Reputation: 9116

You should create a container element with a an img element that has a conditional src attribute.

<!-- only show when the user has selected a value -->
<div *ngIf="selectedCountry">
    <img src="../../assets/images/icons/{{selectedCountry}}.png"/>
</div>

<!-- your select element -->
<md-select ...

You might need to wrap those elements in a flex container or using float.

Upvotes: 1

Related Questions