Customize Icon without Global Replacement

Feature
1

Hi, I would like to ask about the possibility of allowing customization of icons that doesn’t do a global icon replacement, for instance if I would to change the plus icon + to a paperplane icon for just sending a message I would end up replacing all + icon across the site, unless if I’ve missed this being an option from the docs, I would really like the ability to identify a ID/Class or item where I could replace the icon specifically for.

1 Like
2

With CSS you can target and replace a specific instance of an icon.

This topic looks to have some info

3

I’ve tried that and it doesn’t work at least not with the recent discourse install I have. Second that doesn’t appear to replace a single icon instance as it will replace all icons based on the icon selector specified.

At current this is how I replace the ‘new topic’ icon

  api.onPageChange(() => {
    const button = document.querySelector("#create-topic");

    if (button) {
      const oldSvg = button.querySelector("svg");
      if (oldSvg) {
        oldSvg.remove();
      }
      const ns = "http://www.w3.org/2000/svg";
      const svg = document.createElementNS(ns, "svg");
      svg.setAttribute("xmlns", ns);
      svg.setAttribute("viewBox", "10 10 30 30");
      svg.setAttribute("width", "28");
      svg.setAttribute("height", "28");
      svg.setAttribute("class", "svg-icon custom-icon");
      svg.innerHTML = `
        (svg icon code here)
      `;

      button.insertBefore(svg, button.firstChild);
    }
  });

While I could replicate this for the areas I want, it doesn’t work so well on composer icons which I had to do a global icon replace, as the link you shared mentions.

4

It’s not possible at the moment outside of some special cases.

This topic is a duplicate request, so I’m going to close this one in favor of Change single instance of icon, which also has an example of adding an icon via CSS.

Feel free to vote that one up and add any more details there if needed!

3 Likes
5

Duplicate of Change single instance of icon