Как в Bootstrap поместить иконку на поле ввода?

Question

[Wan-Derer]

Есть простая форма ввода. Код примерно такой:

<div className="mt-4 row">
  <label htmlFor="inputFilter" className="col-auto col-form-label">Фильтр:</label>
  <div className="col-7">
    <input className="form-control" id="inputFilter" />
  </div>
</div>

Есть пример иконки-лупы.
Можно ли эту иконку поместить внутрь поля ввода? Примерно так:

Answer 1

[Wan-Derer]

Благодарю за подсказки. Если у кого-то возникнет аналогичный вопрос, оставлю то что у меня получилось (м.б. можно как-то попроще):

<div className="mt-4 row">
  <label className="col-auto col-form-label">Фильтр:</label>
  <div className="col-7">
    <div className="input-group">
      <input type="text" className="form-control border-end-0"/>
      <span className="input-group-text bg-white">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
             className="bi bi-search" viewBox="0 0 16 16">
          <path
            d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
        </svg>
      </span>
    </div>
  </div>
</div>

Answer 2

[Сергей delphinpro]

<div>
  <input className="form-control" id="inputFilter" />
  <icon>
</div>

div {
  position: relative;
}

icon {
  position: absolute;  
  right: 0;
  top: 0;
  pointer-events: none;
}