Текст в input смещается на иконку

Мне нужна ваша помощь. У меня есть input, внутри которого есть иконка svg и placeholder. Мой код ниже помогает мне начать писать внутри input с отступлением влево 48 px и текст отступлением вправо 16px. Проблема заключается в том, если у меня слишком много текста в input, то при вводе мой текст смещается вправо и наезжает на иконку.

Как сделать так, чтобы при вводе текста не заезжал на иконку и стоял на месте? Спасибо вам большое

html

<label class="inputLabel">
    <input type="text" placeholder="Filter by name...">
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M12.5 11H11.71L11.43 10.73C12.41 9.59 13 8.11 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0"
        fill="black" fill-opacity="0.54"/>
    </svg>
</label>

css

.inputLabel {
    position: relative;

    svg {
      position: absolute;
      left: 21px;
      top: 0;
      color: rgba(0, 0, 0, 0.54);
    }
  }
  input {
     line-height: 150%;
     text-indent: 48px;
     padding-right: 16px;
  }
}