I am creating a responsive email template using MJML and I want to create a button with an image next to the text. Something like a custom button with an image of gear next to the word custom. Is there any way I can code in the image next to the text without making the entire button an image?
<mj-column>
<mj-button padding="5px 1px"border-radius="0px" background-color="eeeeee" color="#333333" font-family="Arial" href="http://www.ugg.com/kids" width="100%">
<span style="letter-spacing: 2px;"><mj-image width="40px" src="http://www.online-image-editor.com//styles/2014/images/example_image.png" witdh="40px" /> CUSTOM</mj-image></span>
</mj-button>
</mj-column>
You can try something like this: Just create your png/jpeg and put a href link for it.
<mj-column vertical-align="middle"><mj-image src="https://www.google.de/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" href="www.testdomain.de"></mj-image></mj-column>
<mj-column vertical-align="middle">
<mj-text color="#E60000" padding-bottom="10px" font-weight="bold" font-size="17px">Heading
</mj-text>
<mj-text padding-top="0px" padding-left="0px">
<ul>
<li><strong>Point 1 Lorem ipsum dolor</strong></li>
<li><strong>Point 2 filler text for testing</strong></li>
<li><strong>Point 3 Hello World()</strong></li>
</ul>
</mj-text>
</mj-column>