diff --git a/common/header.html b/common/header.html
deleted file mode 100644
index a85e49c..0000000
--- a/common/header.html
+++ /dev/null
@@ -1,130 +0,0 @@
-
-
-
diff --git a/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs b/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs
new file mode 100644
index 0000000..8fb8eb5
--- /dev/null
+++ b/javascripts/discourse/connectors/category-title-before/category-icon-template.hbs
@@ -0,0 +1 @@
+{{mount-widget widget="category-icon" args=(hash category=category)}}
\ No newline at end of file
diff --git a/javascripts/discourse/initializers/category-icons.js b/javascripts/discourse/initializers/category-icons.js
new file mode 100644
index 0000000..7841953
--- /dev/null
+++ b/javascripts/discourse/initializers/category-icons.js
@@ -0,0 +1,139 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
+import Category from "discourse/models/category";
+
+import { iconHTML, iconNode } from "discourse-common/lib/icon-library";
+import isRTL from "discourse/lib/text-direction";
+import { h } from "virtual-dom";
+import getURL from "discourse-common/lib/get-url";
+
+export default {
+ name: "category-icons",
+
+ initialize() {
+ withPluginApi("0.8.26", (api) => {
+ let categoryThemeList = settings.category_icon_list.split("|");
+ let lockIcon = settings.category_lock_icon || "lock";
+ var get = Em.get,
+ escapeExpression = Handlebars.Utils.escapeExpression;
+
+ function categoryStripe(color, classes) {
+ var style = color ? "style='background-color: #" + color + ";'" : "";
+ return "";
+ }
+
+ function getIconItem(categorySlug) {
+ if (!categorySlug) return;
+
+ let categoryThemeItem = categoryThemeList.find((str) =>
+ str.indexOf(",") > -1
+ ? categorySlug.indexOf(str.substr(0, str.indexOf(","))) > -1
+ : ""
+ );
+ if (categoryThemeItem) {
+ let iconItem = categoryThemeItem.split(",");
+ // Test partial/exact match
+ if (iconItem[3] == "partial") {
+ return iconItem;
+ } else 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
+ ? opts.url
+ : getURL(`/c/${Category.slugFor(category)}/${get(category, "id")}`);
+ let href = opts.link === false ? "" : url;
+ let tagName =
+ opts.link === false || opts.link === "false" ? "span" : "a";
+ let extraClasses = opts.extraClasses ? " " + opts.extraClasses : "";
+ let color = get(category, "color");
+ let html = "";
+ let parentCat = null;
+ let categoryDir = "";
+
+ if (!opts.hideParent) {
+ parentCat = Category.findById(get(category, "parent_category_id"));
+ }
+
+ const categoryStyle =
+ opts.categoryStyle || Discourse.SiteSettings.category_style;
+ if (categoryStyle !== "none") {
+ if (parentCat && parentCat !== category) {
+ html += categoryStripe(
+ get(parentCat, "color"),
+ "badge-category-parent-bg"
+ );
+ }
+ html += categoryStripe(color, "badge-category-bg");
+ }
+
+ let classNames = "badge-category clear-badge";
+ if (restricted) {
+ classNames += " restricted";
+ }
+
+ let style = "";
+ if (categoryStyle === "box") {
+ style = `style="color: #${get(category, "text_color")};"`;
+ }
+
+ html +=
+ `";
+
+ /// Add custom category icon from theme settings
+ let iconItem = getIconItem(category.slug);
+ if (iconItem) {
+ let itemColor = iconItem[2] ? `style="color: ${iconItem[2]}"` : "";
+ let itemIcon = iconItem[1] != "" ? iconHTML(iconItem[1]) : "";
+ html += `${itemIcon}`;
+ }
+ /// End custom category icon
+
+ let categoryName = escapeExpression(get(category, "name"));
+
+ if (Discourse.SiteSettings.support_mixed_text_direction) {
+ categoryDir = isRTL(categoryName) ? 'dir="rtl"' : 'dir="ltr"';
+ }
+
+ if (restricted) {
+ html += iconHTML(lockIcon);
+ }
+ html += `${categoryName}`;
+
+ if (href) {
+ href = ` href="${href}" `;
+ }
+
+ extraClasses = categoryStyle
+ ? categoryStyle + extraClasses
+ : extraClasses;
+ return `<${tagName} class="badge-wrapper ${extraClasses}" ${href}>${html}`;
+ }
+
+ 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);
+ }
+ },
+ });
+ });
+ },
+};