Как убрать костыли из формы поиска bootstrap?

Question

[Алексей Королёв]

Мне нужно впихнуть иконку поиска в форму бутстрап. Код ниже работает, но есть ли варианты адекватного кода для этой формы?

<form class="d-flex">
                         <svg xmlns="http://www.w3.org/2000/svg" style="margin-top:25px;margin-left:15px;" class="position-absolute" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
        <input class="form-control my-3 rounded-pill ps-5" type="search" placeholder="Поиск" aria-label="Search">
      
      </form>

Answer 1

[archelon]

иконку можно поставить
а) через тэг img
б) фоном на родителе или псевдоэлементе
но можно оставить и как сейчас. имхо, это вполне допустимый вариант.

Answer 2

[profesor08]

https://getbootstrap.com/docs/5.1/forms/input-group/