Include icons in category list

common/common.scss

@@ -7,6 +7,25 @@ span.category-badge-icon {
   }
 }
 
-.badge-wrapper .badge-category .d-icon {
+.categories .category h3,
+.badge-wrapper .badge-category {
+  display: inline-flex;
+  .d-icon {
     margin-right: 5px;
+    &:not(.d-icon-lock) {
+      color: inherit;
+    }
+  }
+}
+
+.categories-list .category-box-heading h3 {
+  .d-icon {
+    margin: 0;
+    &:not(.d-icon-lock) {
+      color: inherit;
+    }
+  }
+  div {
+    display: inline;
+  }
 }

common/header.html

@@ -1,19 +1,31 @@
 <script type="text/discourse-plugin" version="0.8.26">
-let categoryThemeList = settings.category_icon_list.split('|');
+  let categoryThemeList = settings.category_icon_list.split('|');
-let lockIcon = settings.category_lock_icon || 'lock';
+  let lockIcon = settings.category_lock_icon || 'lock';
 
-const { iconHTML } = require("discourse-common/lib/icon-library");
+  const { iconHTML, iconNode } = require("discourse-common/lib/icon-library");
-const { isRTL } = require("discourse/lib/text-direction");
+  const { isRTL } = require("discourse/lib/text-direction");
+  const { h } = require("virtual-dom");
 
-var get = Em.get,
+  var get = Em.get,
     escapeExpression = Handlebars.Utils.escapeExpression;
 
-function categoryStripe(color, classes) {
+  function categoryStripe(color, classes) {
     var style = color ? "style='background-color: #" + color + ";'" : "";
     return "<span class='" + classes + "' " + style + "></span>";
-}
+  }
 
-function categoryIconsRenderer(category, opts) {
+  function getIconItem(categorySlug) {
+    let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(categorySlug) > -1);
+    if (categoryThemeItem) {
+      let iconItem = categoryThemeItem.split(',');
+      // Ensure exact match
+      if(iconItem[0] === categorySlug) {
+        return iconItem;
+      }
+    }
+  }
+
+  function categoryIconsRenderer(category, opts) {
     let description = get(category, "description_text");
     let restricted = get(category, "read_restricted");
     let url = opts.url
@@ -64,16 +76,12 @@ function categoryIconsRenderer(category, opts) {
       ">";
 
     /// Add custom category icon from theme settings
-	let categoryThemeItem = categoryThemeList.find((str) => str.indexOf(category.slug) > -1);
+    let iconItem = getIconItem(category.slug);
-	if (categoryThemeItem) {
+    if(iconItem) {
-		let iconItem = categoryThemeItem.split(',');
-		// Ensure exact match
-		if(iconItem[0] == category.slug) {
       let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : "";
       let itemIcon = iconItem[1] != '' ? iconHTML(iconItem[1]) : "";
       html += `<span ${itemColor} class="category-badge-icon">${itemIcon}</span>`;
     }
-	}
     /// End custom category icon 
 
     let categoryName = escapeExpression(get(category, "name"));
@@ -93,7 +101,23 @@ function categoryIconsRenderer(category, opts) {
 
     extraClasses = categoryStyle ? categoryStyle + extraClasses : extraClasses;
     return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}</${tagName}>`;
-};
+  };
 
-api.replaceCategoryLinkRenderer(categoryIconsRenderer);
+  api.replaceCategoryLinkRenderer(categoryIconsRenderer);
+
+  api.createWidget("category-icon", {
+    tagName: "div.category-icon-widget",
+    html(attrs) {
+      let iconItem = getIconItem(attrs.category.slug);
+      if(iconItem && !attrs.category.parent_category_id) {
+        let itemColor = iconItem[2] ? `color: ${iconItem[2]}` : "";
+        let itemIcon = iconItem[1] != '' ? iconNode(iconItem[1]) : "";
+        return h("span.category-icon", { "style": itemColor }, itemIcon);
+      }
+    }
+  });
+</script>
+
+<script type="text/x-handlebars" data-template-name="/connectors/category-title-before/category-icon-template">
+  {{mount-widget widget="category-icon" args=(hash category=category)}}
 </script>