title: place search icon to the front of an input without altering existing styles
body: <p>Have the attached markup and css.</p>
  
  <p>I want to place the search icon to the front of the input without altering the 100% width of the input.</p>
  
  <p>I would like to use absolute positioning but then when the user places the focus on the input the cursor will be over the image.</p>
  
  <p>Is there a way round this?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>form-control__input {
    margin-bottom: 8px !important;
  }
  
  .form-control__wrapper {
    position: relative;
  }
  
  .input__default {
    border: 1px solid #727272;
    background: #fff;
    width: 100%;
    padding: 6px 12px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="form-group form-control__input"&gt;
    &lt;div class="form-control__wrapper"&gt;&lt;svg viewBox="0 0 16 16" class="ng-element" data-id="d1ec30cc21c0cdbdc697b4afd1ce6469" overflow="visible" filter="none" style="mix-blend-mode: normal; width: 16px; height: 16px;"&gt;&lt;path d="M15.566 13.68l-3.467-3.466c-.018-.019-.04-.032-.059-.049a6.56 6.56 0 1 0-1.875 1.875c.017.02.03.04.048.06l3.467 3.466a1.334 1.334 0 0 0 1.886-1.886zM6.56 10.846a4.286 4.286 0 1 1 0-8.572 4.286 4.286 0 0 1 0 8.572z" vector-effect="non-scaling-stroke" fill="#AEAEAE" fill-rule="nonzero"&gt;&lt;/path&gt;&lt;/svg&gt;
      &lt;input autocomplete="off" class="input__default form-control" id="ctrl1" aria-describedby="ctrl1-error" type="text"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>