Jdenticon doesn't render my icons

Symptoms

There are multiple error descriptions for this issue:

Background

By default Jdenticon will schedule a call to jdenticon() once your page has finished loading. This function will find all icon placeholders on the page and render them. This won't work if:

Solution 1

There are ready to use libraries or code snippets for the frameworks listed below.

If the used framework is not listed above, or if plain JavaScript is used, you need to implement a solution by yourself. There are two ways of doing so.

Solution 2

Since version 2.1.0 Jdenticon can detect when <svg> and <canvas> elements are inserted onto the page dynamically and then trigger a render without manually calling jdenticon.update().

To enable this feature, set replaceMode to observe before the Jdenticon library is loaded. See the example below how this is done in vanilla JavaScript. Please note that this feature is not supported in IE10 and earlier.

Enable observe mode

<script>
    window.jdenticon_config = {
        replaceMode: "observe"
    };
</script>
<script src="https://cdn.jsdelivr.net/npm/jdenticon@2.1.0"></script>

If you use Webpack or Browserify you need to ensure jdenticon_config is set before loading Jdenticon.

This feature utilizes mutation observers. If you notice any slowdown using this approch, consider using solution 1 instead.