Para poder especificar una altura a un enlace, primero tienes que convertirlo en un elemento de bloque, ya que por defecto es un elemento en linea y estos no aceptan alturas ni rellenos. Cuando flotas un elemento este automáticamente se convierte en elemento de bloque, de ahí que luego te funcionara.
De todas formas si haces cosas raras con tu HTML y/o CSS, ten por seguro que ocurrirán cosas raras.
¿Por qué si quieres poner un SVG dentro del círculo no lo pones dentro del elemento que hará de círculo? Claro, al no hacerlo, el SVG te queda por debajo del botón, y en vez de solucionarlo correctamente, lo que haces es ponerlo en una posición relativa y moverlo hacia arriba, pero el espacio que ocupaba el SVG, se sigue manteniendo. Y ese es el espacio fantasma que tienes ahí.
Lo del símbolo extraño que tienes, es simplemente el subrayado del enlace, solo tienes que indicar que no quieres subrayado.
Así que te quedaría algo así:
https://jsfiddle.net/250az2ue/1/
Mi recomendación es que, para cosas así (enlaces con iconos) uses fuentes de iconos. Es más simple y el código te queda mucho más limpio. Puedes incluso creártelas tú mismo con herramientas online como
IcoMoon.