Link

<a href="./relative"> <span> Relative </span> </a><a href="/absolute"> <span>
    Absolute </span> </a><a href="//example.com/external" rel="noopener"> <span>
    External </span> </a>

<Link href="./relative">Relative</Link>
<Link href="/absolute">Absolute</Link>
<Link href="//example.com/external">External</Link>

<a href="./"> <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"
    aria-labelledby="973a0243-dbee-4b7c-b416-db13bdf05762"> <title
      id="973a0243-dbee-4b7c-b416-db13bdf05762">Go</title> <path
      d="M5.132 12.01c.001.438.169.877.504 1.211l10.296 10.268a1.715 1.715 0 0 0 2.42-2.427l-9.083-9.057 9.058-9.083A1.713 1.713 0 0 0 15.9.502L5.632 10.797a1.713 1.713 0 0 0-.5 1.213z"></path>
  </svg> <span> Left icon </span> </a><a href="./"> <span> Right icon </span>
  <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" role="img"
    aria-labelledby="d04ddfc5-192c-412f-9ba0-3cf196274ddd"> <title
      id="d04ddfc5-192c-412f-9ba0-3cf196274ddd">Go</title> <path
      d="M18.854 12.01a1.711 1.711 0 0 1-.504 1.211L8.055 23.488a1.713 1.713 0 0 1-2.42-2.427l9.083-9.057L5.66 2.921A1.713 1.713 0 0 1 8.086.501l10.268 10.295c.334.337.501.775.5 1.214z"></path>
  </svg></a><a href="./"> <svg viewBox="0 0 24 24" width="24" height="24"
    fill="currentColor" role="img"
    aria-labelledby="a7fd23c1-543f-41e5-95d8-afda2b5500e4"> <title
      id="a7fd23c1-543f-41e5-95d8-afda2b5500e4">Go</title> <path
      d="M13.8 24c-.3 0-.7-.1-1-.3-.6-.5-.7-1.5-.2-2.1l6.7-8H1.5C.7 13.5 0 12.8 0 12s.7-1.5 1.5-1.5h17.8l-6.7-8c-.5-.6-.4-1.6.2-2.1.6-.5 1.6-.4 2.1.2L23.6 11c.1.1.2.2.2.3 0 0 0 .1.1.1 0 .1.1.2.1.3v.6c0 .1 0 .2-.1.3v.1c-.1.1-.1.2-.2.3L15 23.5c-.4.3-.8.5-1.2.5z"></path>
  </svg> </a>

<Link href="./"><ChevronLeft slot="before-link" title="Go" />Left icon</Link>
<Link href="./">Right icon<ChevronRight slot="after-link" title="Go" /></Link>
<Link href="./"><Arrow slot="before-link" title="Go" /></Link>