Clear icon disappears when input is focused

1

This is the code I’m working with:
(I’m using bootstrap)

<style>
  .input-group {
      position: relative;
   }

   .input-group svg {
       position: absolute;
       top: 25%;
       right: 1%;
       width: 20px;
       height: auto;
       border-radius: 50%;
    }
</style>
<div class="container mt-4">
  <div class="input-group">
    <input type="text" class="form-control">
    <svg xmlns='http://www.w3.org/2000/svg' fill="#A8A7B1" width='512' height='512' viewBox='0 0 512 512'><title>ionicons-v5-m</title><path d='M256,48C141.31,48,48,141.31,48,256s93.31,208,208,208,208-93.31,208-208S370.69,48,256,48Zm75.31,260.69a16,16,0,1,1-22.62,22.62L256,278.63l-52.69,52.68a16,16,0,0,1-22.62-22.62L233.37,256l-52.68-52.69a16,16,0,0,1,22.62-22.62L256,233.37l52.69-52.68a16,16,0,0,1,22.62,22.62L278.63,256Z'/></svg>
  </div>
</div>

When I click on the input field, the clear icon disappears. Why is that? How to fix this?

2