I can't change the notification icons

Dev
1

Hi, everybody
I want to change these icons

image
image388×543 32.1 KB

I did it like this

image
image1371×377 67 KB

And I wrote it in the Header
image

But the icon has not changed
It works with other icons
Please help me solve this problem

2 Likes
2

Hi Mikhail,

Please try this one :slightly_smiling_face:

<script type="text/discourse-plugin" version="0.8">
  api.replaceIcon('notification.granted_badge', 'oo-medal-badges');
</script>

You can find these replacements here :arrow_down:

4 Likes
3

Yes, it worked. Thank you very much
image

1 Like
4

And where can I see what they look like?

5

You can easily identify it by using inspect elements.

For example.: the certificate icon notification

  1. Find the icon name with inspect elements

Screenshot 2021-08-11 at 16.43.04
Screenshot 2021-08-11 at 16.43.041276×746 253 KB

  1. Find the same icon in the icon-library js

Then you can replace the icon with any other icon you want. :slightly_smiling_face:

1 Like
6

Thanks for your reply
I figured it out. I thought there was some sort of list with standard Discourse icons

1 Like
7

May I add this for future reference. I followed the instructions on Replace Discourse's default SVG icons with custom icons in a theme - #19 by dodesz but but what I did not realise at first was that the same icon can be referred to in different ways. In the app itself, under ‘/styleguide/atoms/icons’ is a list of all the icons and how they are referred to, so in my header.html file I now have 5 references to the envelope icon:

    api.replaceIcon('envelope', 'fgx-air-mail');
    api.replaceIcon('far-envelope', 'fgx-air-mail');
    api.replaceIcon('notification.private_message', 'fgx-air-mail');
    api.replaceIcon('notification.read_private_message', 'fgx-air-mail');
    api.replaceIcon('notification.invited_to_private_message', 'fgx-air-mail');
2 Likes