topic Icon size doesn't match text size (too large) in ArcGIS Hub Questions

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

lmarun — Thu, 31 Oct 2024 21:43:49 GMT

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:

<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>.

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

JenniferAcunto — Fri, 01 Nov 2024 12:14:35 GMT

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

<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>.

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

lmarun — Fri, 01 Nov 2024 16:11:07 GMT

Yes, of course!!

Thank you, Jen! 🙂

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

BrianRollison — Thu, 07 Nov 2024 18:21:47 GMT

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>.