Setting to show category icon from discourse-category-icons theme com…

…ponent (discourse#7)

common/common.scss

@@ -17,6 +17,18 @@ div[class^="category-title-header"] {
     .category-title {
       display: inline;
     }
+
+    .category-icon-widget {
+      display: inline;
+
+      .category-icon {
+        .d-icon {
+          height: 1.5em;
+          width: 1.5em;
+          margin-right: 0.75em;
+        }
+      }
+    }
   }
 
   .category-title-description {

javascripts/discourse/widgets/category-header-widget.js.es6

@@ -2,13 +2,21 @@ import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
 import { createWidget } from "discourse/widgets/widget";
 
-function buildCategory(category) {
+function buildCategory(category, widget) {
   const content = [];
 
   if (category.read_restricted) {
     content.push(iconNode("lock"));
   }
 
+  if (settings.show_category_icon) {
+    try {
+      content.push(widget.attach("category-icon", { category }));
+    } catch {
+      // if widget attaching fails, ignore it as it's probably the missing component
+    }
+  }
+
   content.push(h("h1.category-title", category.name));
 
   if (settings.show_description) {
@@ -63,7 +71,7 @@ export default createWidget("category-header-widget", {
               style: `background-color: #${category.color}; color: #${category.text_color};`,
             },
           },
-          h("div.category-title-contents", buildCategory(category))
+          h("div.category-title-contents", buildCategory(category, this))
         );
       }
     } else {

settings.yml

@@ -29,3 +29,7 @@ show_below_site_header:
   default: true
   type: bool
   description: "Display the banner in the below site header connector."
+
+show_category_icon:
+  default: false
+  description: "Show category icon from Discourse Category Icons component"