Why doesn't the icon change everywhere?

I use this script to change icons throughout my site successfully, and this changes the solved-check icon for the Solved plugin to a thumbs-up.

However, it doesn’t change in all instances of the site, such as within the notification list:

Here’s how it looks in other places of the site where it does work:


1 Like

Some icons, including all of the notifications, need special treatment because we use different names. In this case you’re looking for notification.solved.accepted_notification (all these outlier icon names are listed in the replacements section in discourse/icon-library.js.es6 at master · discourse/discourse · GitHub)

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('notification.solved.accepted_notification', 'thumbs-up')

Sorry to bring this up again, but, do you know why the icon isn’t changing in the post controls?

This is the code I’m using:

Are you trying to change it specifically for that icon location and state? If you are still trying to change the icon globally the code you originally posted is still correct:

api.replaceIcon('far-check-square', 'thumbs-up')
api.replaceIcon('check-square', 'thumbs-up')

That checkmark icon next to “Kudos” is not the default, so might you have conflicting code somewhere?


Specifically in that area, because as Kris aforementioned, sometimes the code has to be very specific. This is all the code I’ve added for changing icons:

As Kris mentioned, only some icons need special treatment. Notifications are one of those, so that’s why you needed to use notification.solved.accepted_notification. In the case of the solved icon in the post controls, it’s using the generic icon name, so you will only be able to change it globally when using the replaceIcon method.

If you want to get really specific, I think you will need to override the addPostMenuButton function that’s defined in the solved plugin. Try this:

<script type="text/discourse-plugin" version="0.8"> 
  const { iconNode } = require("discourse-common/lib/icon-library");
  api.addPostMenuButton("solved", attrs => {
    const currentUser = api.getCurrentUser();
    const canAccept = attrs.can_accept_answer;
    const canUnaccept = attrs.can_unaccept_answer;
    const accepted = attrs.accepted_answer;
    const isOp = currentUser && currentUser.id === attrs.topicCreatedById;
    const position =
      !accepted && canAccept && !isOp ? "second-last-hidden" : "first";

    if (canAccept) {
      return {
        action: "acceptAnswer",
        icon: "far-check-square",
        className: "unaccepted",
        title: "solved.accept_answer",
        label: "solved.solution",
    } else if (canUnaccept && accepted) {
      const title = canUnaccept
        ? "solved.unaccept_answer"
        : "solved.accepted_answer";
      return {
        action: "unacceptAnswer",
        icon: "thumbs-up",          // MODIFIED HERE
        className: "accepted fade-out",
        label: "solved.solution"
    } else if (!canAccept && accepted) {
      return {
        className: "hidden",
        disabled: "true",
        beforeButton(h) {
          return h(
              title: I18n.t("solved.accepted_description")
              h("span", iconNode("thumbs-up")),       // MODIFIED HERE
              h("span.accepted-label", I18n.t("solved.solution"))

This works, but oddly this script makes it so only me with the admin account can see the topic with a solved reply, any other users are unable to see it.

1 Like

Oh weird! I’m not sure why that only fails for non-admin users… In any case, I’ve updated the script with the missing piece.


It’s no longer broken, but, the icon change only displays for admins and for non-admins it still has the solved/check icon:


1 Like

Ah yeah, script updated.

1 Like