How to add SVG image icon in dropdown list?

Question

I am trying to add some SVG image icons to my dropdown list, I tried a few different approaches but none of them seems to be working.

appt-status option[value="0"] {
    background-image: url(../icons/not_confirmed-icon.svg);
}

.appt-status option[value="1"] {
    background-image: url(../icons/confirmed-icon.svg);
}

.appt-status option[value="2"] {
    background-image: url(../icons/reschedule-icon.svg);
}

.appt-status option[value="3"] {
    background-image: url(../icons/pending-icon.svg);
}

 <select class="form-control appt-status" data-bind="value: selectedAppointmentStatus">
                <option class=" status-list" value="1" style="color: #3EA47B">Confirmed</option>
                <option class="status-list" value="2" style="color: #FF0000">Reschedule</option>
                <option class="status-list" value="3" style="color: #FFA927">Pending</option>
                <option class="status-list" value="0" style="color: #3EA47B">Not opted-in</option>
</select>

With the above code, in inspect window, I can see icons are being loaded but I cannot see them in the dropdown.

Below is the design mockup I would like to achieve

But the result I am getting

Review this previous SO answer. In short, it's not widely supported natively. [https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list](https://stackoverflow.com/questions/2965971/how-to-add-images-in-select-list) — wouch, Jul 14 '22 at 15:31
@wouch I tried but I still do not see icons in the dropdown list. — Rnue, Jul 14 '22 at 19:36

score 0 · Answer 1 · answered Jul 14 '22 at 19:42

0

you could try to use a pseudo element to add the icons to your status-list class, something like this might work

.status-list:before {
    content: url('../icons/reschedule-icon.svg');
}

answered Jul 14 '22 at 19:42

JDawwgy

888
2
18

I tried but it did not work. – Rnue Jul 14 '22 at 19:50

Mohamed Ramadan · Answer 2 · 2022-07-17T12:12:33.087

0

You can't directly achieve it with the HTML alone. To display the images in the select drop-down we have to use JavaScript libraries or pure JavaScript. you can add an image in select options using the select2 jQuery library.

https://select2.org/dropdow

edited Jul 17 '22 at 12:12

answered Jul 14 '22 at 20:01

Mohamed Ramadan

20
3

score 0 · Answer 3 · answered Jul 21 '22 at 13:11

.fa {
   font-family: 'Lato', 'Font Awesome 5 Free', 'Font Awesome 5 Brands';
    font-weight: 900;
  padding: 1rem 2rem;
  color: #3a9c7d;

}

<div class="select-box">

  <select name="sample" id="sample" class="fa">
    <option value="">----</option>
    <option value="fa fa-address-card" class="fa">&#xf2bb; address card</option>
    <option value="fa fa-bell" class="fa">&#xf0f3; bell</option>
    <option value="fa fa-bookmark" class="fa">&#xf02e; bookmark</option>
    <option value="fa fa-building" class="fa">&#xf1ad; building</option>
  </select>

</div>

Demo link:- https://codepen.io/mstanka/pen/mdPBdMa

How to add SVG image icon in dropdown list?

3 Answers3