title: Font awesome icon inside of materialize input
body: <p>I am trying to put a font awesome icon inside the materialize text input, but to no luck. I dont mean regularly like they show on their website.</p>
  <p>I mean like this:</p>
  <p><a href="https://i.stack.imgur.com/MsNgx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MsNgx.png" alt="IMAGE" /></a></p>
  <p>Current Code:</p>
  <pre><code>            &lt;div class=&quot;row&quot; style=&quot;margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;&quot;&gt;
              &lt;div class=&quot;input-field col s12&quot; style=&quot;margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;&quot;&gt;
              &lt;span style=&quot;right:8px;top:10px;&quot; class=&quot;fas fa-user&quot;&gt;&lt;/span&gt;
              &lt;input value=&quot;X (4)&quot; id=&quot;tag&quot; type=&quot;text&quot; class=&quot;validate white-text&quot; disabled&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;input-field col s12&quot; style=&quot;margin-top: 0px !important; margin-bottom: 0px !important; padding: 0px !important;&quot;&gt;
              &lt;span style=&quot;right:8px;top:10px;&quot; class=&quot;fas fa-user&quot;&gt;&lt;/span&gt;
            &lt;input value=&quot;X Coin&quot; id=&quot;type&quot; type=&quot;text&quot; class=&quot;validate white-text&quot; disabled&quot;&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  </code></pre>
  <p>As you can see on the image it's actually inside the materalize input since it's inside the inputs border-bottom.</p>
  <p>This uses default materalize (my code).</p>
  <p>How would i accomplish this? I've tried adding the font awesome besides inside of the input field div but it wont align besides it. Or inside it.</p>
  <p>Thanks for reading.</p>
  <p>Regards.</p>