How can I display a 'Reload' symbol in HTML without loading an image via HTTP?

Question

I would like to display a 'refresh' symbol in an HTML/JavaScript app I'm creating, but I do not want to make any HTTP requests to load an image. How can I do this reliably across all major browsers?

The closest Unicode value I could find is: ↺ (↺), but the arrow is pointing the wrong way.

Is there another Unicode value that works?

Is there a Webdings font that works? (They don't usually work in Opera and Firefox.)

Is there a way to create an image in JavaScript using a base64 image source provided by a String from that JS?

EDIT:

The reason for this is NOT overhead. The app being created must be self-contained in a single javascript file, without any other dependencies. It is a development utility that can be added to any project, without the need for a network.

Answer 1

If you find the character ↻ (↻), i.e. U+21BB CLOCKWISE OPEN CIRCLE ARROW, acceptable for your needs (its arrow might not be placed the same way as in common reload icons), then you can use it rather safely:

.reload {    font-family: Lucida Sans Unicode  }

<span class=reload>&#x21bb;</span>

The Lucida Sans Unicode font contains the symbol, and it is available in virtually any Windows system you can find these days. According to MS info, it was included even in Windows 98 (and Windows 95 plus).

Systems other than Windows can reasonably be expected to have the symbol in some font and to have browsers that know how to pick it up from some of them. And fonts containing it have rather similar shapes for it. (But if the symbol needs to match stylistically the text of your document, you need to study the situation in more detail and try to make sure that all fonts in your font list, or “font stack”, contain it.)