I can't change the notification icons

Development

AI-generated summary

I can’t change the notification icons

User Mikhail_Tyuftyaev is having trouble changing the notification icons. They’ve tried modifying the Header but it’s not working. Don suggests using a script to replace the icon, providing an example:

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

Mikhail_Tyuftyaev confirms that this solution works.

To identify the icon name, Don recommends using Inspect Elements. Mikhail_Tyuftyaev asks where to find the icon list, and Don points to the icon-library.js file on GitHub.

kjs-fgx shares their experience with replacing icons, noting that the same icon can be referred to in different ways. They provide an example of how to replace the envelope icon in the header.html file:

    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');

The app/styleguide/atoms/icons list can be used to find the correct icon references.

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
image675×130 7.69 KB

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

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:

3

Yes, it worked. Thank you very much

image
image481×429 26.2 KB

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:

6

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

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 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');