title: How to add icons in a select using bootstrap 5 and bootstrap icons
body: <p>I would like to add some icons to a bootstrap select like this:</p>
  <p><a href="https://i.stack.imgur.com/lqdQl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lqdQl.png" alt="Desired result" /></a></p>
  <p>What I've tried:</p>
  <pre><code>&lt;select class=&quot;form-select&quot; aria-label=&quot;Filter select&quot;&gt;
    &lt;option data-icon=&quot;bi bi-funnel-fill&quot; selected&gt;Filter&lt;/option&gt;
    &lt;option value=&quot;1&quot;&gt;All&lt;/option&gt;
    &lt;option value=&quot;2&quot;&gt;Active&lt;/option&gt;
    &lt;option value=&quot;3&quot;&gt;Inactive&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  <p>I tried using <code>data-icon</code> (as I have seen in some stackoverflow answers) but it did not work for me.</p>
  <p>I wonder if for bootstrap 5 there is another way to get this result or if I did something wrong.</p>
  <p>Any help is welcome.</p>
  <p><a href="https://jsfiddle.net/gerasg/qg1rs2wk/5/" rel="nofollow noreferrer">LIVE JS FIDDLE DEMO</a></p>