Category icons component

Yes sorry should have updated my post. I have figured out with Font Awesome had to add them to Setup.

And recently learned as you said need to create an svg sprite file to upload to icons-sprites.

Still learning a lot of new things. Appreciate the help in evolving my knowledge. Thank you

1 Like

The category icons on our site have looked great, until I logged in today. it appears that the padding in between the icon and the category title has no padding, when displayed. Anyone else having this issue?


2020-03-17_21-45-10 (1)


I’m seeing that as well, I’m sure Penar will fix it, but for now this will fix it

.select-kit .select-kit-header .selected-name .name .d-icon {
    margin-right: .25em;

Thanks both, this should be fixed now.


Is it possible to use other icons that Font Awesome? My forum is about travelling and i need very specific icons that don’t exist there. Can we use a regular png icon file for example? as we do with categories? thanks!

1 Like

You can use custom icons if you convert them to SVGs and add them to your theme via an SVG sprite. See the “Create an SVG spritesheet” section of this guide on how to add custom icons to your site which you can then use in this component (and throughout your Discourse site).


Works great!
Is it possible for me to tweak it so that the icon appears after the category title?
Bonus question: is it possible to add a tooltip/alt-text?

(Background: I’m hiding the pad lock icon and instead use this component to add an icon to the few public categories I have. And I would like for users to have way to find out what the symbol stands for.)