Icon size doesn't match text size (too large)

[lmarun]

I'd like to include and external link icon for some of our links, but the icon is too big. 

How can I use a smaller version of this?

Here's some sample code, and a screenshot of what it looks like:

<p><a href="https://www.youtube.com/@OurChannel/videos" target="_blank">Visit our YouTube channel <calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="m" calcite-hydrated=""></calcite-icon></a>.<br></p>

[JenniferAcunto · Accepted solution]

Change scale="m" to scale="s"

<p><a href="https://www.youtube.com/@OurChannel/videos" target="_blank">Visit our YouTube channel <calcite-icon icon="launch-2" text-label="external link" aria-hidden="false" aria-label="external link" role="img" scale="m" calcite-hydrated=""></calcite-icon></a>.<br></p>

[lmarun]

Yes, of course!!

Thank you, Jen! 🙂

[BrianRollison]

Consider using a calcite link, the icon is specified as a proper of the calcite component and it's sizing is kept aligned with the scale of the link itself: https://developers.arcgis.com/calcite-design-system/components/link/.

Explore around in the calcite playground and copy/paste the HTML directly into the Text Card's HTML editor. There are more props to include, but it would look something like <calcite-link icon-end="launch" ...more props...>Visit our YouTube channel</calcite-link>.