title: SVG icons - badly vertical align
body: <p>I'm using SVG icons in the button and they are badly vertical align. When I set up <code>vertical-align: middle</code> for them, the result is the same as when I set up <code>"bottom"</code> and so the icons are down too much. </p>
  
  <p>When I change the setting to <code>vertical-align: top</code>, the icons are at <code>1px</code> higher. What is the universal way how to align them? </p>
  
  <p>Of course, I could use for example: <code>vertical-align: top; margin-top: 1px;</code> but I don't want to have all icons in the button positioned by margin.</p>
  
  <p>Example:</p>
  
  <p><a href="https://jsfiddle.net/7nhcruw2/2/" rel="nofollow">https://jsfiddle.net/7nhcruw2/2/</a></p>