# Category Icons

**URL:** https://meta.discourse.org/t/category-icons/104683
**Category:** Theme component
**Tags:** official, deprecated, category-icons
**Created:** [19 december 2018 om 16:22 UTC](https://meta.discourse.org/t/category-icons/104683 "2018-12-19T16:22:44Z")
**Posts on this page:** 20
**Page:** 6

<div class="post-metadata">

### Author: ![Ant\_Vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ant_vincent/32/194386_2.png) [@Ant\_Vincent](https://meta.discourse.org/u/Ant_Vincent)
#### Post date: [19 september 2020 om 20:19 UTC](https://meta.discourse.org/t/category-icons/104683/107 "2020-09-19T20:19:12Z")

</div>

Hi all - I have installed the plugin but I can’t seem to find where I can configure it?

Is this compatible with 2.6.0.beta2?

here is my app.yml

```
hooks:
  after_code:
    - exec:
	cd: $home/plugins
        cmd:
          - git clone https://github.com/discourse/docker_manager.git
  ## - git clone https://github.com/discourse/discourse-adplugin.git
  ## - git clone https://github.com/discourse/discourse-solved.git
  ## - git clone https://github.com/discourse/discourse-akismet.git
  ## - git clone https://github.com/discourse/discourse-bbcode.git
  ## - git clone https://github.com/discourse/Discourse-Tiles-image-gallery.git
  ## - git clone https://github.com/tshenry/discourse-versatile-banner.git
          - git clone https://github.com/discourse/discourse-category-icons.git

## Any custom commands to run after building

```

I have rebuild but can see anything anywhere on the admin panel to config?

Please help

---

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [19 september 2020 om 20:23 UTC](https://meta.discourse.org/t/category-icons/104683/108 "2020-09-19T20:23:51Z")

</div>

Hello this is not a plugin! This is a theme component.

Please read how to install a theme component: [Installing a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)

Edit: These are also theme components so install this way ⬆

```
- git clone https://github.com/discourse/Discourse-Tiles-image-gallery.git
- git clone https://github.com/tshenry/discourse-versatile-banner.git

```

---

<div class="post-metadata">

### Author: ![Ant\_Vincent](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ant_vincent/32/194386_2.png) [@Ant\_Vincent](https://meta.discourse.org/u/Ant_Vincent)
#### Post date: [19 september 2020 om 20:43 UTC](https://meta.discourse.org/t/category-icons/104683/109 "2020-09-19T20:43:38Z")

</div>

Thank you Don you’re a star - as you can tell brand-new to this platform

Ant

---

<div class="post-metadata">

### Author: ![rogerco](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rogerco/32/161338_2.png) [@rogerco](https://meta.discourse.org/u/rogerco)
#### Post date: [25 september 2020 om 20:57 UTC](https://meta.discourse.org/t/category-icons/104683/110 "2020-09-25T20:57:30Z")

</div>

Hi, I’ve just created a PR to add a new option to specify the colour for the icon as “catcol” which will cause it to pickup the colour of the category (as seen in the category stripe and set under edit category|general|background colour  
eg “test,hands-helping,catcol,partial”

Most useful with the partial name match so that, in the example, the same icon can be used for all categories with “test” in their slug but they will each pick up their own category colour rather than all using the same. Also provides a quick alternative to having to select a colour for a one-off icon (exact match) - simply use the category colour.

This will also be useful with a proposed further new option to have the icon replace the category stripe whilst maintaining the category colour hint - to be subject of a future PR

RogerCO

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [28 september 2020 om 13:59 UTC](https://meta.discourse.org/t/category-icons/104683/111 "2020-09-28T13:59:39Z")

</div>

@rogerco’s PR is now merged, you can use the category colour now by adding the special keyword “categoryColour” where the icon color should go. Thanks Roger!

---

<div class="post-metadata">

### Author: ![md-misko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/md-misko/32/126315_2.png) [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [28 september 2020 om 14:29 UTC](https://meta.discourse.org/t/category-icons/104683/112 "2020-09-28T14:29:50Z")

</div>

> [@pmusaraj](#):
>
> special keyword “categoryColour”

Color is not applied on icons in `/categories` wiew?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [28 september 2020 om 14:42 UTC](https://meta.discourse.org/t/category-icons/104683/113 "2020-09-28T14:42:08Z")

</div>

Ah, sorry about that, should be fixed now.

---

<div class="post-metadata">

### Author: ![REALITY](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reality/32/199798_2.png) [@REALITY](https://meta.discourse.org/u/REALITY)
#### Post date: [21 november 2020 om 11:16 UTC](https://meta.discourse.org/t/category-icons/104683/115 "2020-11-21T11:16:39Z")

</div>

Hi, does this component require FontAwesome or can I use my own icons?

---

<div class="post-metadata">

### Author: ![renato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato/32/383632_2.png) [@renato](https://meta.discourse.org/u/renato)
#### Post date: [28 november 2020 om 21:01 UTC](https://meta.discourse.org/t/category-icons/104683/116 "2020-11-28T21:01:45Z")

</div>

I don’t know if it may be useful for anyone else, but I’ve submitted a [pull request](https://github.com/discourse/discourse-category-banners/pull/7) for `discourse-category-banners` to show the `discourse-category-icons` icon beside the banner title. I’m using it in production [here](https://forum.comparajogos.com.br/).

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [30 november 2020 om 14:49 UTC](https://meta.discourse.org/t/category-icons/104683/117 "2020-11-30T14:49:18Z")

</div>

Thanks @renato, your PR is now merged.

---

<div class="post-metadata">

### Author: ![md-misko](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/md-misko/32/126315_2.png) [@md-misko](https://meta.discourse.org/u/md-misko)
#### Post date: [30 november 2020 om 19:33 UTC](https://meta.discourse.org/t/category-icons/104683/118 "2020-11-30T19:33:28Z")

</div>

This is a nice addition, but it doesn’t work as expected if the category icon color is set to the same color as the category (you use default black for your category icons in your example, and they get inverted to white, same as the title).

The icon color in the title should probably be set explicitly to the same color as the title, so that any color icons could be used?

---

<div class="post-metadata">

### Author: ![renato](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/renato/32/383632_2.png) [@renato](https://meta.discourse.org/u/renato)
#### Post date: [30 november 2020 om 19:53 UTC](https://meta.discourse.org/t/category-icons/104683/119 "2020-11-30T19:53:56Z")

</div>

> [@md-misko](#):
>
> This is a nice addition, but it doesn’t work as expected if the category icon color is set to the same color as the category (you use default black for your category icons in your example, and they get inverted to white, same as the title).

I had this same issue on my instance, but I realized that by omitting the color of the category icon it takes the appropriate color, being white when on the category renderer: ![image](https://global.discourse-cdn.com/meta/original/3X/9/b/9b2d3183601b0bf5e709c14dba08c824b62616cf.png)and on the banner title, but black when the background is white: ![image](https://global.discourse-cdn.com/meta/original/3X/f/f/ff00050f598cf2b33cd0b30e2a249aec6821efe8.png).

However, if you don’t use the `box` category style and the category icon color is set to the same color as the category background, you’re right, the icon becomes “invisible”.

We could explicitly set it to something else, sure. The banner title uses the category color, maybe this is the safest bet, as you suggested. @pmusaraj what do you think?

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [1 december 2020 om 21:08 UTC](https://meta.discourse.org/t/category-icons/104683/120 "2020-12-01T21:08:48Z")

</div>

> [@renato](#):
>
> The banner title uses the category color, maybe this is the safest bet, as you suggested.

Yes, that works for me.

---

<div class="post-metadata">

### Author: ![Doug\_White](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/doug_white/32/197382_2.png) [@Doug\_White](https://meta.discourse.org/u/Doug_White)
#### Post date: [6 februari 2021 om 03:48 UTC](https://meta.discourse.org/t/category-icons/104683/121 "2021-02-06T03:48:32Z")

</div>

Hi. This is a great component. Is it possible to turn off the category icons when they appear in category lists? In our case we want to use the category icons everywhere else they appear but not in the category list drop-down.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [6 februari 2021 om 15:09 UTC](https://meta.discourse.org/t/category-icons/104683/122 "2021-02-06T15:09:25Z")

</div>

Yes you can add some CSS to hide the icons in the specific lists.

---

<div class="post-metadata">

### Author: ![Doug\_White](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/doug_white/32/197382_2.png) [@Doug\_White](https://meta.discourse.org/u/Doug_White)
#### Post date: [7 februari 2021 om 16:52 UTC](https://meta.discourse.org/t/category-icons/104683/123 "2021-02-07T16:52:36Z")

</div>

Hi Penar. Note that we want to keep the icons for all categories but we want to disable the display of the icon only in the category list control drop-down. I’ve tried working with the “fa d-icon d-icon-lock svg-icon svg-string” and 'category-name" classes but had no luck. Where should I apply the CSS settings? Can you give me a suggestion of settings to try?

Thanks,  
Doug

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [7 februari 2021 om 19:59 UTC](https://meta.discourse.org/t/category-icons/104683/124 "2021-02-07T19:59:39Z")

</div>

Sure, I can help. Can you post a screenshot of the UI element where you would like to hide the icons? I’m not 100% sure I understand exactly, with a screenshot I should be able to send you the CSS needed to hide the icons in that specific context only.

---

<div class="post-metadata">

### Author: ![Doug\_White](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/doug_white/32/197382_2.png) [@Doug\_White](https://meta.discourse.org/u/Doug_White)
#### Post date: [8 februari 2021 om 15:18 UTC](https://meta.discourse.org/t/category-icons/104683/125 "2021-02-08T15:18:08Z")

</div>

Hi Penar,

Great. Attached is the screenshot of a test example where we would like to not have the icon display.

 ![Screen Shot 2021-02-08 at 9.55.59 AM](https://global.discourse-cdn.com/meta/original/3X/f/e/fee35949bb8153a33a6110f3c1c68b04acaa271f.png). This screenshot shows an arrow icon displaying in the category list drop-down control. We do want the icon to display in other locations on the site (see the second screen shot) [Screen Shot 2021-02-08 at 9.59.36 AM|690x356](https://meta.discourse.org/uploads/short-url/ecsrHgCBBBUH5PUBv3P35NAx5ub.png) such as where posts appear. A few users here have requested having something like this back arrow icon so they can easily navigate back to the top of a category after looking at a post. I’ve suggested other ways to do this using the Discourse web interface, but they still would like this request implemented.

Thank you,  
Doug White  
Carolina Health Informatics Program  
University of North Carolina at Chapel Hill

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [8 februari 2021 om 15:58 UTC](https://meta.discourse.org/t/category-icons/104683/126 "2021-02-08T15:58:51Z")

</div>

Hmm, the CSS to do this is this:

```css
.select-kit-row .category-badge-icon {
    display: none;
}

```

You will run into issues elsewhere though, the category badge is shown in lots of places and that arrow will be confusing more often than it will be helpful.

---

<div class="post-metadata">

### Author: ![Doug\_White](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/doug_white/32/197382_2.png) [@Doug\_White](https://meta.discourse.org/u/Doug_White)
#### Post date: [8 februari 2021 om 17:37 UTC](https://meta.discourse.org/t/category-icons/104683/127 "2021-02-08T17:37:42Z")

</div>

Yes, I know. I told them that, but was requested to do it anyway. Is there a way to remove the icon from appearing in the control itself. It’s still showing up at the top on the list control.

 ![Screen Shot 2021-02-08 at 12.35.09 PM](https://global.discourse-cdn.com/meta/original/3X/d/5/d5d779b76b70fe3cf3349e2ad01a6dab7322035c.png).

[Previous page](https://meta.discourse.org/t/category-icons/104683.md?page=5)

[Next page](https://meta.discourse.org/t/category-icons/104683.md?page=7)
