I think is problem is due to different line concept for character and symbol.
Line height set the baseline of typography.and all character sit on base line.
In case of alphbates they must lie between baseline and shoulder line hence appear to be in center but
as symbol need not to touch shoulder line and sit at base they appears little bit lower than alphabet
In your case as font size is more it looking more lower.
Go to this link to see the anatomy of typography
Close calculation for line-height would be
calc(12vh * .5 + 17px);
NOTE: That also isn't perfect because there's still some unnoticeable margins below the arrow icon but it's close.
12vh * .5 is the value for half the div's height.
17px is the default font-size for a HTML5 text