Calcite button: space between text and icon

[lmarun]

I'd like to create a space between the text and a calcite icon in a button. I do not want that space underlined. I've made several attempts, but am having no luck. 

Please my code below and an image of the result.

<a class="btn btn-primary" href="https://webpage.com/" role="button" target="_blank">Website<calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="s" alignment="icon-start-space-between" calcite-hydrated=""></calcite-icon></a>

[JenniferAcunto · Accepted solution]

<a class="btn btn-primary" href="https://webpage.com/" role="button" target="_blank">Website<calcite-icon icon="launch-2" style="margin-left: 3px;" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="s" alignment="icon-start-space-between" calcite-hydrated=""></calcite-icon></a>

[BrianRollison · Accepted solution]

@lmarun you will get this spacing right out of the box using a calcite button within the Text Card, you can use the Calcite Components explorer to play around with styling and simply copy/paste into your Text Card's HTML editor: https://developers.arcgis.com/calcite-design-system/components/button/.

At a high-level the basic visual props would be <calcite-button icon-end="launch">Website</calcite-button>.

[lmarun]

@BrianRollison and @JenniferAcunto, thank you for both of these great options!