Select dropdown with icon

Bootstrap 5 Select dropdown with icon component

Responsive Select dropdown with icon built with Bootstrap 5. An example of simply placing an icon in a selection option.

Basic example

To make an icon(image) appear in the selection field, add the attribute data-mdb-icon="*" in <option>, and in place of * provide a link to the image.

Edit in sandbox 
        
            
      <select data-mdb-select-init>
        <option value="1" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg"
          >One</option
        >
        <option value="2" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg"
          >Two</option
        >
        <option value="3" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg"
          >Three</option
        >
        <option value="4" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.jpg"
          >Four</option
        >
        <option value="5" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg"
          >Five</option
        >
      </select>