Main icon position

[thijsvdanker]

This PR addresses #4 and is an extension of #5.

It fixes the position of the icon in Firefox 54.0 (osx) and Safari 10.1.1.
In addition to #5 I'm changing the width and height attributes of the non-displaying icon to 0.
This fixes the animation and the positioning.

There is one little annoyance at this moment. When loading the page, the button flashes a little wider than it should be.
See gif below. Slowed down for illustration purposes.

[hazzo]

Hi again @thijsvdanker , thanks for taking time to fix this.

It's seems to be working on IE but the transition it's not as smooth as it's in the original version. The reason its because now icons are relative to each other so they both fill a space in the same row. The other way, absolute positioning, one icon is on top of the other guaranteeing a smooth transition with a fading opacity.
Also if you look closely to your version when you close the fab the icon blinks and it's like there is no element for a split of a second.

If you can manage to solve the issue conserving the same type of smoothness we'll accept the PR.

Thanks again!