How to add icons in a select using bootstrap 5 and bootstrap icons

Question

I would like to add some icons to a bootstrap select like this:

What I've tried:

<select class="form-select" aria-label="Filter select">
  <option data-icon="bi bi-funnel-fill" selected>Filter</option>
  <option value="1">All</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
</select>

I tried using data-icon (as I have seen in some stackoverflow answers) but it did not work for me.

I wonder if for bootstrap 5 there is another way to get this result or if I did something wrong.

Any help is welcome.

LIVE JS FIDDLE DEMO

Not sure how it works with Bootstrap icons as I always use Font Awesome but.... `` should be somewhere toward what you're looking for. — Cutey from Cute Code, Nov 02 '21 at 12:13

score 4 · Accepted Answer · answered Nov 02 '21 at 16:33

The <option> tag's only permitted content is:

Text, possibly with escaped characters (like é).

So it's probably just ignored by the browser. When I try <option selected><i class="bi bi-funnel"></i> Filter</option> the <i> tag doesn't even show up when inspecting the element in Chrome.

You can use an Input group or try to find a suitable UTF character.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css" rel="stylesheet" crossorigin="anonymous">

<div class="input-group">
  <label class="input-group-text" for=""><i class="bi bi-funnel"></i></label>
  <select class="form-select" aria-label="Filter select">
    <option selected><i class="bi bi-funnel"></i> Filter</option>
    <option value="1">All</option>
    <option value="2">Active</option>
    <option value="3">Inactive</option>
  </select>
</div>

<!-- OR -->

<select class="form-select" aria-label="Filter select">
  <option selected>&#x29E9; Filter</option>
  <option value="1">All</option>
  <option value="2">Active</option>
  <option value="3">Inactive</option>
</select>

How to add icons in a select using bootstrap 5 and bootstrap icons

1 Answers1