Jdenticon doesn't render my icons

Symptoms

There are multiple error descriptions for this issue:

• A <canvas> or <svg> element is added with the data-jdenticon-value attribute, but no icon is rendered. The placeholder element is left empty.
• Icons are rendered for some placeholders, but not for others.
• No icons are rendered after navigating, but after a page refresh they are rendered.

Background

If you are using the UMD build of Jdenticon (jdenticon.js or jdenticon.min.js) the library 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:

• <canvas> or <svg> elements are dynamically inserted onto the page using JavaScript after the initial page load. These icons won't by default be rendered.
• A JavaScript framework is used that dynamically modify the page after the initial page load. By using React, Angular, Vue and similar frameworks, icon placeholders specified in a view template will be inserted on the page dynamically after the initial page load and won't be picked up by Jdenticon.
• The module build (jdenticon-module.js or jdenticon-module.mjs) is used, since it does not render any icons automatically. The module build is used if you use Webpack, Rollup or any other bundler.

Solution 1

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

• React
• Angular 2+
• AngularJS
• Ember
• Polymer

Solution 2

If the used framework is not listed above, or if plain JavaScript is used, you need to update the icon on demand. Here are some possibilities:

• Call jdenticon.toSvg() to create an SVG icon, and then insert the SVG markup directly onto the html. Inline SVG markup is supported by all browsers supported by Jdenticon. This option is recommended for frameworks operating on textual HTML templates, like Mustache and Handlebars, but can also be used for frameworks operating on DOM elements, like Angular or React.
• Call jdenticon.update() after an <svg> or <canvas> element is inserted onto the page. Keep in mind that you might need to delay the call to jdenticon.update() if your framework component executes before the DOM element is actually inserted onto the DOM tree.

Solution 3

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@3.2.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.