Je ne peux pas changer les icônes de notification

[Mikhail_Tyuftyaev]

Hi, everybody
I want to change these icons

I did it like this

And I wrote it in the Header

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

[Don]

Hi Mikhail,

Please try this one

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

You can find these replacements here

discourse/discourse/blob/dc6b547ed89f652b5406489d76140b76cf8e0d1d/app/assets/javascripts/discourse-common/addon/lib/icon-library.js#L13

[Mikhail_Tyuftyaev]

Yes, it worked. Thank you very much

[Mikhail_Tyuftyaev]

And where can I see what they look like?

@Don

const REPLACEMENTS = {
            "d-tracking": "bell",
            "d-muted": "discourse-bell-slash",
            "d-regular": "far-bell",
            "d-watching": "discourse-bell-exclamation",
            "d-watching-first": "discourse-bell-one",
            "d-drop-expanded": "caret-down",
            "d-drop-collapsed": "caret-right",
            "d-unliked": "far-heart",
            "d-liked": "heart",
            "notification.mentioned": "at",

[Don]

You can easily identify it by using inspect elements.

For example.: the certificate icon notification

1. Find the icon name with inspect elements

---

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

discourse/discourse/blob/dc6b547ed89f652b5406489d76140b76cf8e0d1d/app/assets/javascripts/discourse-common/addon/lib/icon-library.js#L40

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

[Mikhail_Tyuftyaev]

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

[kjs-fgx]

Puis-je ajouter ceci pour référence future. J’ai suivi les instructions sur Replace Discourse's default SVG icons with custom icons in a theme - #19 mais ce que je n’avais pas réalisé au début, c’est que la même icône peut être référencée de différentes manières. Dans l’application elle-même, sous « /styleguide/atoms/icons », se trouve une liste de toutes les icônes et de la manière dont elles sont référencées, donc dans mon fichier header.html, j’ai maintenant 5 références à l’icône enveloppe :

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