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 the browser supports loading image data from a Base64 string, you can use img and set its src to the following format:

data:[<mediatype>][;base64],<data>

Example:

var img = document.getElementById("yourImage");
img.src = "data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7";

<img id="yourImage" />