title: How to place an icon inside a circle at the start of an input field?
body: <p>I am trying to place an icon inside a circle and that circle will be placed at the start of an input field like below:</p>
  
  <p><a href="https://i.stack.imgur.com/eR0tE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eR0tE.png" alt="enter image description here"></a></p>
  
  <p>I am trying to achieve this using below code in <code>ionic</code>:</p>
  
  <p>// in .html</p>
  
  <pre><code>&lt;ion-row&gt;
    &lt;ion-item&gt;
      &lt;ion-label&gt; &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;&lt;/ion-label&gt;
      &lt;ion-input clearInput type="text"&gt;&lt;/ion-input&gt;
    &lt;/ion-item&gt;
  &lt;/ion-row&gt;
  </code></pre>
  
  <p>// in .scss</p>
  
  <pre><code>ion-item {
    border-radius: 23px;
    padding-left: 0;
  }
  
  ion-label {
      border-radius: 23px;
      border: 2px solid red;
      width: 12%;
      height: 100%;
  }
  </code></pre>
  
  <p>But i could achieve only below:</p>
  
  <p><a href="https://i.stack.imgur.com/4Jg1Q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Jg1Q.png" alt="enter image description here"></a></p>
  
  <p>Can anyone help me on that?</p>