Change icons globally

Documentation Developer Guides
22

Yes, follow this guide: Replace Discourse's default SVG icons with custom icons in a theme

2 Likes
23

Bump, please. I have the same question.

Out of the box, discourse uses the link icon at the bottom of post as a “share” button (it’s more than the link, it offers social media sharing) yet the same icon is used in the editor to edit a link.

These really ought to be different; they are different functions. OR if anyone has a way to override the global change in the post editor, I’d appreciate it.

2 Likes
24

Recently changed the Like icon from the “heart” to " book-reader".

Had great success changing all of the Like icons, except the one in the notifications, drop-down list

Capture166

I’ve used the following header, adding all possible options I could think of:

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  // notifications 
        api.replaceIcon('notification.liked_2', 'book-reader');  // notifications 
        api.replaceIcon('notification.liked_many', 'book-reader');  // notifications 

    </script>

The heart has been replaced everywhere on the platform, except for the notification drop-down list…

Any thoughts?

1 Like
25

Try to add also

api.replaceIcon('notification.liked_consolidated', 'book-reader');

1 Like
26

Thanks for the response, Daniela!

Added it, but still no change. The heart still shows as the notification icon.

   <script type="text/discourse-plugin" version="0.8">
        api.replaceIcon('d-unliked', 'book-reader');
        api.replaceIcon('d-liked', 'book-reader');
        api.replaceIcon('heart', 'book-reader');
        api.replaceIcon('new read', 'book-reader');
        api.replaceIcon('d-icon-heart', 'book-reader');
        api.replaceIcon('notification.liked', 'book-reader');  
        api.replaceIcon('notification.liked_2', 'book-reader');  
        api.replaceIcon('notification.liked_many', 'book-reader');  
        api.replaceIcon('notification.liked_consolidated', 'book-reader');  

    </script>

Other than this instance, the book-reader icon has replaced all heart icons everywhere.

Thought it might be an icon conflict, so I changed from “book-reader” to “pencil”, since I know notifications can use that icon. Didn’t work, still a heart.

Any thoughts?