How do I position an inline svg as a background-image in an input element?

Question

I'm using an inline svg as a background image in a search box.

I thought setting width and height the same in the viewBox was correct, but ejrm setting it below 20, it cuts off part of the svg. Above 20 it shows, but doesn't position correctly. What is the correct way to set the size of the svg and position it?

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 center;
  padding: 10px 40px;
  //background-size: 40px;
}

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>

Answer 1

Get rid of: background-position:0 center;

.input__search {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18 22a6 6 0 1 0 0-12 6 6 0 0 0 0 12zm6.321-1.096l5.386 5.39a1 1 0 1 1-1.414 1.413l-5.386-5.388a8 8 0 1 1 1.414-1.415z' fill='red' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  padding: 10px 40px;
  //background-size: 40px;
}

<div class="container input">
  <input type="text" placeholder="search" class="input__search">
</div>