Css – How to ensure an icon is always next to the preceding word?

What you need is a display: inline-block property on your a anchor tag. By default, the display property for a is inline.

The main difference between both of them is inline-block will ensures everything inside the element stays within the same line (acts as 1 single element regardless of what is inside the element), whereas inline will wrap to the next line if it runs out of space by creating new line inside the element, which is not what you want in this case.

a {
  display: inline-block;
}

div {
  width: 52ch;
}

img {
  width: 16px;
  height: 16px;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<img src="https://www.svgrepo.com/show/20745/info.svg" /></a>.
</div>

Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/display

An alternative approach is to make use of characters that force the browser to never make newline:

div {
  width: 52ch;
}

img {
  width: 16px;
  height: 16px;
}

span {
  white-space: nowrap;
}

<div>
  The next sentence has a multi-word link where the (i) icon should always be next to the word "link".
  This is a <a href="#">sample link<span>&#8288;<img src="https://www.svgrepo.com/show/20745/info.svg" /></span></a>.
</div>

The ⁠ character is u2060 in unicode that stands for Zero width no-break space (Word-joiner), it renders nothing on screen but is actually a character that forces it to not break at this character in Flow Layout. When used together with white-space: nowrap, the browser will not break at this character thus making sure the icon stays with the last word.