Category Icons

[volanar]

Hi! Is there any update news? It’s very interesting what happened

[mattdm (Matthew Miller)]

@carson

This update has not yet been merged, it only exists as a separate branch in the repository at the moment. I will submit a PR soon by next week to merge it without breaking any existing configurations. Thank you for your kind feedback!

What is the state of this? I’d love to move beyond fontawesome.

[carson]

It hasn’t been merged, but you’re free to install the repository and use my branch in the meanwhile.

[mattdm (Matthew Miller)]

Thanks! I’ll wait until the new menu work for our site is done, and then try it in staging.

[volanar]

Does anyone know when this will happen so as not to use this component in a new project?

FEATURE: Use new experimental plugin API for sidebar

[Moin]

I would just use the component. In Moving to a Single Category Style Site Setting there were questions about category icons and this does not sound like they will become part of core untill the release of Discourse 3.2.

@awesomerobot

The category icons component will need to be refactored, we can work on that before this update happens.

[awesomerobot (Kris)]

Yes, to confirm I’ve just merged an update to this component to make it compatible with Moving to a Single Category Style Site Setting

The update will be available for sites on version Discourse 3.2.0.beta4-dev or later, thanks to Pinning plugin and theme versions for older Discourse installs (.discourse-compatibility)

Since this is pinned to a version rather than a specific commit… if you’re already on Discourse 3.2.0.beta4-dev and are experiencing issues with this component, you may need to update Discourse again today.

[mattdm (Matthew Miller)]

I never did get a chance to try your branch, but hope to come back to this. Any more news on whether this will become official?

[mattdm (Matthew Miller)]

@carson Got a chance to play with this a bit. Looks basically good, except:

1. Icons in category-select drop-down are not in color
2. Doesn’t work in the new menu
3. If you enable “Use the category’s uploaded logo as its icon”:
   a. it only affects the category-select drop-down
   b. not shown next to the category in any other places
   c. and also if this is on, the category-select drop-drop down only shows these icons (even if other categories have different icons configured).
4. Icons seem larger than they were in the previous theme. Making them the same size would be least disruptive — but maybe it would be nice to have a setting for the size?

Also, some nice-to-haves:

• An option to hide the category lock icon, not just set it to some other thing^[1]
• If category logo is used, give an option to hide the big category logo on the categories page. They’re redundant.
• Move emoji and fontawesome config to the category page, next to the category logo configuration

---

1. I find it adds a lot of visual noise and not a lot of value because it doesn’t tell you how the category is restricted! ↩︎

[zhang_zhiyuan]

Hey Coin,

We think we meet the same problem as ultrakiller.

Here is the file we add to upload

When we use the codes to instead the star icon to this category icon, it does not work

<script type="text/discourse-plugin" version="0.8">
    api.replaceIcon('d-liked', 'beer');
    api.replaceIcon('d-unliked', 'fa-beer');
    api.replaceIcon('star', 'category');
</script>

We really confused which step we are missing. Can you please figure it out? Thank you so much!

[Arkshine]

Hey, you must follow this guide to create an SVG file with the proper format:

Replace Discourse's default SVG icons with custom icons in a theme

You can replace Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> t…

In your case, that would be something like:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="my-icon-id" viewBox="0 0 1024 1024" fill="none">
        <path fill="currentColor" d="M768.487 554.422H553.554v214.926c0 106.838 86.61 193.437 193.442 193.437h21.491c106.832 0 193.432-86.603 193.432-193.437v-21.492c.002-106.83-86.606-193.434-193.432-193.434m-515.842 0c-106.83 0-193.435 86.61-193.435 193.434v21.492c0 106.838 86.606 193.437 193.435 193.437h21.494c106.83 0 193.432-86.603 193.432-193.437V554.422zm21.498-494.346H252.65c-106.835 0-193.44 86.606-193.44 193.442v21.492c0 106.825 86.607 193.431 193.44 193.431h214.926V253.518c.002-106.836-86.604-193.442-193.432-193.442m494.344 0h-21.491c-106.836 0-193.442 86.606-193.442 193.442V468.44h214.933c106.832 0 193.432-86.606 193.432-193.431v-21.492c.002-106.836-86.606-193.442-193.432-193.442m0 0"/>
    </symbol>
</svg> 

Make sure:

• You insert fill="currentColor"
• Upload the SVG with a SCSS var name icons-sprite.

Result:

[zhang_zhiyuan]

Thank you Arkshine. Please let me try.