Hello, I would like to replace the check icons in the review page only. We can find it there : Approved If I use this: api.replaceIcon('check', 'full-circle-icon'); all the checks of the forum will be replaced by the full-circle… But I don’t want to replace the icon in the other pages. How can I modify do that? Thank you for your answer

Not 100% sure it would work because I haven’t tried it, but you can try to get the current page with javascript, check if it’s a review page, then change the icon with your line of code. I believe there was a JS example somewhere on meta using the API to get the current page we’re on, but I couldn’t find it again. Or maybe you can just return the current URL to check if you’re on /review.

I tried that: api.onPageChange((url) => { if (window.location.href.indexOf("review") > -1) { api.replaceIcon('check', 'full-circle-icon'); } } But it’s not working… I have this error: SyntaxError: /discourse/theme-35/initializers/theme-field-379-common-html-script-1: Unexpected token, expected “,” (97:5) Did I do something wrong?

You forgot ); at the end of your code, hence the error. Something like this could work (don’t mind the URI parsing, there’s many ways to do it): api.onPageChange((url) => { if (location.pathname.split('/')[1] == "review") { api.replaceIcon('check', 'full-circle-icon'); } }); But be aware that onPageChange doesn’t trigger on the first page load. If you open directly yourforum/reviews in your browser, then onPageChange won’t trigger and the icon won’t be replaced. I don’t know how to trigger the icon change on both the first page load and on a page change though. Maybe there’s an API method for that, but I didn’t find it. :person_shrugging: Plus, once the icon is changed, it will remain changed on other pages as you navigate, so you should revert the icon change if the URL isn’t /review. In short… I think it requires a bit more work to be fully functional. Note that I’m not exactly an expert in Discourse code or javascript. Maybe someone with more knowledge will be able to help further. edit: the code doesn’t work when you go to /review the first time, I suppose this is because the page is loaded and the icon isn’t dynamically changed. So, we should find another way to do that. Sorry that I can’t help more with this. :pensive:

[image] Coin-coin le Canapin: you should revert the icon Do you know how to do that?

Hello, I write a css solution too. :slightly_smiling_face: It will hide the default check icon and add the custom icon to a ::before pseudo. Create a new theme component. Upload the icon to the Uploads section and add the SCSS var name: review-approved-icon [Screenshot 2022-11-29 at 21.47.23] Click Edit CSS/HTML button and paste the following code to Common / CSS section. Use this if you want to use var(--success) to add color to the custom icon [Screenshot 2022-11-29 at 21.49.31] .reviewable { .status span.approved { position: relative; &:before { content: url($review-approved-icon); width: 13px; height: 13px; top: 0px; position: absolute; // var(--success) light scheme color #090 (custom icon color) // you can calculate new light color filter here: https://codepen.io/sosuke/pen/Pjoqqp filter: invert(35%) sepia(92%) saturate(1240%) hue-rotate(91deg) brightness(89%) contrast(104%); @media (prefers-color-scheme: dark) { // var(--success) dark scheme color #1ca551 (custom icon color) // you can calculate new dark color filter here: https://codepen.io/sosuke/pen/Pjoqqp filter: invert(52%) sepia(26%) saturate(1605%) hue-rotate(93deg) brightness(91%) contrast(78%); } } .d-icon { visibility: hidden; } } } Use this if your icon has color what you want to use .reviewable { .status span.approved { position: relative; &:before { content: url($review-approved-icon); width: 13px; height: 13px; top: 0px; position: absolute; } .d-icon { visibility: hidden; } } } Use this if you want to use different icon on light and dark color scheme If you choose this then you have to upload two different icon with different colors. SCSS var name: review-approved-icon-light and review-approved-icon-dark [Screenshot 2022-11-30 at 8.25.06] .reviewable { .status span.approved { position: relative; &:before { content: url($review-approved-icon-light); @media (prefers-color-scheme: dark) { content: url($review-approved-icon-dark); } width: 13px; height: 13px; top: 0px; position: absolute; } .d-icon { visibility: hidden; } } } [Screenshot 2022-11-29 at 21.38.55]

Unique custom icon for review page only

Development

Joart November 29, 2022, 4:27pm 5

Do you know how to do that?

Topic		Replies	Views
Change icons globally Developer Guides how-to	26	10793	October 5, 2025
Change single instance of icon Feature	14	546	May 16, 2025
Why doesn't the icon change everywhere? Product Support	9	1186	August 30, 2019
I can't change the notification icons Development	6	952	January 30, 2023
Replace Discourse's default SVG icons with custom icons in a theme Developer Guides how-to , theme-guides	10	9589	February 24, 2026

Unique custom icon for review page only

Related topics