Flags in an mdb-select component

  options = [
    { value: '1', label: 'One', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp' },
    { value: '2', label: 'Two', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp' }
  ];

<div class="md-form">
  <mdb-select-2 placeholder="Choose your option" label="Example label">
    <mdb-select-option *ngFor="let option of options" [value]="option.value"
      >{{ option.label }}
      <span class="option-image-container">
        <img class="option-image rounded-circle" [src]="option.icon" />
      </span>
    </mdb-select-option>
  </mdb-select-2>
</div>

.mdb-option-text {
  display: flex;
  justify-content: space-between;
}

.option-image {
  height: 25px;
  width: 25px;
}

itay pro commented a year ago

Can you point me to an example ?

---

Arkadiusz Idzikowski staff commented a year ago

I edited my answer and added an example of select with icons.

---

itay pro commented a year ago

Thanks ! Where can we get country icons ?

---

Arkadiusz Idzikowski staff commented a year ago

We do not have any country icons available in our library. You would need to use external images.

---