How to add a SVG icon within an input?
<p>I need to place icons within the inputs for creating a new user. It's probably a really easy task for someone who knows their way around front end code. However I don't. Here is the wireframe and then I show my code.</p>
<h2>WIREFRAME</h2>
<p><a href="https://i.stack.imgur.com/hkgyb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hkgyb.png" alt="enter image description here" /></a></p>
<p>As you can see. There are icons on the left side of the inputs. Right now I have the SVG's in my directory and ready to go I just need to know how to place them within the input. Here is the code for the form</p>
<h2>FORM</h2>
<pre><code>&lt;label clas=&quot;name-label&quot;&gt;
  &lt;%= f.text_field :name, placeholder: &quot;Name&quot;, class: &quot;form-labels&quot; %&gt;
&lt;/label&gt;

&lt;label class=&quot;email-label&quot;&gt;
  &lt;%= f.text_field :email, placeholder: &quot;Email&quot;, class: &quot;form-labels&quot; %&gt;
&lt;/label&gt; 
</code></pre>
<p>So I have the placeholder with a string which currently just printing that string. I need to put the icons within that I think? Here is the css I have for the icons.</p>
<h2>CSS</h2>
<pre><code>.icon-email {
  background-image: image-url('email-field.svg');
}

.icon-name {
 background-image: image-url('name-field.svg');
}
</code></pre>
<p>Is there a way I can place these classes within the place holder?</p>