# Modifier une seule instance d'icône

**URL:** <https://meta.discourse.org/t/change-single-instance-of-icon/336356>\
**Category:** Feature\
**Created:** [Novembre 15, 2024, 3:31 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356 "2024-11-15T15:31:56Z")\
**Posts on this page:** 1\
**Showing post:** 15

<div class="post-metadata">

**Author:** ![digitaldominica](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@digitaldominica](https://meta.discourse.org/u/digitaldominica)\
**Post date:** [Mai 16, 2025, 10:18 UTC](https://meta.discourse.org/t/change-single-instance-of-icon/336356/15 "2025-05-16T22:18:37Z")

</div>

Merci d’avoir signalé cela — vous avez tout à fait raison. L’utilisation de `api.onPageChange` seul peut être peu fiable car elle se déclenche lors du changement de route, et non après le rendu du DOM. Cela signifie qu’il y a un risque de condition de concurrence où le bouton `#create-topic` pourrait ne pas encore exister lorsque le script tente d’y accéder.

```plaintext
 api.onPageChange(() => {
        const targetSelector = "#create-topic";

        const tryEnhanceButton = () => {
            const button = document.querySelector(targetSelector);

            if (button) {
                // Déconnecter l'observateur après avoir trouvé l'élément
                observer.disconnect();

                // Cacher temporairement le bouton pendant que nous remplaçons l'icône
                button.style.display = "none";

                // Supprimer l'ancienne icône si elle existe
                const oldIcon = button.querySelector("svg");
                if (oldIcon) oldIcon.remove();

                // Créer et insérer la nouvelle icône SVG Font Awesome
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.setAttribute("class", "fa d-icon d-icon-feather-pointed svg-icon svg-string");
                newIcon.setAttribute("xmlns", "http://www.w3.org/2000/svg");
                newIcon.innerHTML = '<use href="#feather-pointed"></use>';

                button.insertBefore(newIcon, button.firstChild);

                // Réafficher le bouton
                button.style.display = "block";
            }
        };

        // Observer les changements dans le DOM et essayer d'améliorer le bouton lorsqu'il est ajouté
        const observer = new MutationObserver(() => tryEnhanceButton());
        observer.observe(document.body, { childList: true, subtree: true });

        // Essayer immédiatement également au cas où il serait déjà présent
        tryEnhanceButton();
    });

```

@Don J’ai inclus `MutationObserver` pour m’assurer que le script ne s’exécute qu’une fois que l’élément cible existe réellement. Il se déconnecte après avoir accompli sa tâche pour éviter une surcharge inutile. Il tente toujours une vérification immédiate au cas où l’élément existerait déjà.

Je ne parviens pas à récupérer le SVG que je souhaite du système d’icônes Discourse, bien que je l’aie enregistré dans l’ensemble d’icônes SVG d’administration, car il semble qu’il soit dans Font Awesome mais pas dans Discourse.

---

_[View the full topic](https://meta.discourse.org/t/change-single-instance-of-icon/336356)._