title: Add SVG icon to input element placeholder with center-aligned text
body: <p>I have an input field which has 100% width and text aligned to center. Right now, I use Font Awesome but I need to replace their icon to an arbitrary SVG icon. I tried most common techniques like background image and <code>:before</code> pseudo-element. But they don't work simply because they don't adapt to center-aligned text.</p>
  
  <p>The end result I'm seeking <a href="http://codepen.io/rishatmuhametshin/pen/waVEWV" rel="nofollow">would look like this</a>, but FA icon replaced with a new SVG one.</p>
  
  <p>Is it possible? What path should I take? I'm feeling like I'm at the point of very beginning, and this won't be easy, so I'd love to get any useful information possible. Would love to finally get to a pure CSS (SCSS) solution.</p>