Change single instance of icon

Contribute Feature
11

@awesomerobot Here’s an updated code of what I’ve done to change the create topic icon which is a + without global change to all +

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        const button = document.querySelector("#create-topic");

        if (button) {
            // Temporarily hide the button while we replace the icon
            button.style.display = "none";

            // Look for the SVG inside the button
            const oldIcon = button.querySelector("svg");
            if (oldIcon) {
                // Remove the existing icon (SVG)
                oldIcon.remove();
            }

            // Create a new SVG for the Font Awesome icon (fa-feather-pointed)
            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>';

            // Insert the new icon inside the button
            button.insertBefore(newIcon, button.firstChild);

            // Show the button again after icon replacement
            button.style.display = "block";
        }
    });
</script>

Have to refine it a bit more for multiple icon changes

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // List of button selectors and corresponding custom SVG content
        const iconsToReplace = [
            { selector: "#create-topic", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 2L15 5H13V9H11V5H9L12 2ZM3 12L5 10V13H9V15H5V18L3 16V12ZM21 12L19 10V13H15V15H19V18L21 16V12Z"/>
                </svg>
            ` },
            { selector: "#some-other-button", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M21 3H3C2.44772 3 2 3.44772 2 4V20C2 20.5523 2.44772 21 3 21H21C21.5523 21 22 20.5523 22 20V4C22 3.44772 21.5523 3 21 3ZM20 19H4V5H20V19Z"/>
                </svg>
            ` },
            { selector: "#another-button", newSVG: `
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                    <path d="M12 2L8 6H10V10H14V6H16L12 2ZM12 12L8 16H10V20H14V16H16L12 12Z"/>
                </svg>
            ` }
        ];

        iconsToReplace.forEach(icon => {
            const button = document.querySelector(icon.selector);

            if (button) {
                // Temporarily hide the button while we replace the icon
                button.style.display = "none";

                // Look for the existing SVG inside the button
                const oldIcon = button.querySelector("svg");
                if (oldIcon) {
                    // Remove the existing icon (SVG)
                    oldIcon.remove();
                }

                // Create a new SVG element and set its content
                const newIcon = document.createElementNS("http://www.w3.org/2000/svg", "svg");
                newIcon.innerHTML = icon.newSVG; // Set the custom SVG content

                // Insert the new SVG icon inside the button
                button.insertBefore(newIcon, button.firstChild);

                // Show the button again after icon replacement
                button.style.display = "block";
            }
        });
    });
</script>