⚡ Quick Fix (TL;DR)

The Culprit: Loading an icon font or an image for a single small arrow adds an extra network request and file weight for something CSS can draw directly.

The Fix: Build the arrow from two rotated borders. It automatically inherits the surrounding text color via currentColor, so it stays in sync with whatever element it sits inside.

.arrow-right {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: 6px;
}