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>

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098