Button Icon Vertical Alignment Bug on Apple Mail 7/8

Hi there,
I have a bulletproof button with icon and text from http://buttons.cm/ + my own style, which aligns button's content vertically to the middle by using line-height: 40px and vertical-align: middle.

It works well in all major desktop and web clients (including Outlook), but Apple Mail. It seems that the 'grey arrow-button' that Apple Mail uses for showing URL previews and such is messing with the alignment of the <img> icon. The Apple Mail grey button shows only on hover.

Has anyone seen this before and would you know how to fix it? Is there a best practice when using <img> icons in <a> buttons? Thank you!

Please see the screenshot and the attached code below.

http://i.imgur.com/OrQ3mUc.png

    <table cellpadding="0" cellspacing="0" width="100%" style="-webkit-box-sizing: border-box; box-sizing: border-box; border-collapse: separate !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -premailer-width: 100%;">
    <tr>
    <td class="pb10 align-center" style="-webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif; font-size: 14px; mso-table-lspace: 0pt; mso-table-rspace: 0pt; vertical-align: top; text-align: center; padding-bottom: 10px;" align="center" valign="top">

        <center>
            <!--[if mso]>
                <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="{FullButtonURL}" style="height:40px;v-text-anchor:middle;width:420px;" arcsize="13%" stroke="f" fillcolor="#00d75e">
                <w:anchorlock/>
                <center>
            <![endif]-->
                <a class="button button--success" href="{FullButtonURL}" style="-webkit-box-sizing: border-box; box-sizing: border-box; color: #ffffff; text-decoration: none; -premailer-cellpadding: 0; -premailer-cellspacing: 0; -premailer-width: 100%; border-radius: 5px; display: inline-block; font-family: sans-serif; font-size: 14px; line-height: 40px; text-align: center; width: 100%; -webkit-text-size-adjust: none; font-weight: bold; text-transform: uppercase; background: #00d75e;"><img class="button__icon" src="download@3x.png" width="12" height="14" alt="Download" border="0">&nbsp;&nbsp;&nbsp;{FullButtonText}</a>
            <!--[if mso]>
                </center>
                </v:roundrect>
            <![endif]-->
        </center>

    </td>
    </tr>
    </table>

200,000 companies around the world can't be wrong.

From Australia to Zimbabwe, and everywhere in between, companies count on 
Campaign Monitor for email campaigns that drive real business results.

Get started for free
1-888-533-8098