FEATURE: Plugins can overwrite and add support for new icons

app/assets/javascripts/admin/components/admin-directory-toggle.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 export default Ember.Component.extend(bufferedRender({

app/assets/javascripts/admin/components/admin-web-hook-status.js.es6

@@ -1,5 +1,5 @@
 import computed from 'ember-addons/ember-computed-decorators';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 export default Ember.Component.extend(bufferedRender({

app/assets/javascripts/discourse-common/helpers/fa-icon.js.es6

@@ -1,23 +1,8 @@
 import { registerUnbound } from 'discourse-common/lib/helpers';
+import { renderIcon } from 'discourse-common/lib/icon-library';
 
-export function iconClasses(icon, params) {
+export function iconHTML(id, params) {
-  let classes = "fa fa-" + icon;
+  return renderIcon('string', id, params);
-  if (params.modifier) { classes += " fa-" + params.modifier; }
-  if (params['class']) { classes += ' ' + params['class']; }
-  return classes;
-}
-
-export function iconHTML(icon, params) {
-  params = params || {};
-
-  var html = "<i class='" + iconClasses(icon, params) + "'";
-  if (params.title) { html += ` title='${I18n.t(params.title)}'`; }
-  if (params.label) { html += " aria-hidden='true'"; }
-  html += "></i>";
-  if (params.label) {
-    html += "<span class='sr-only'>" + I18n.t(params.label) + "</span>";
-  }
-  return html;
 }
 
 registerUnbound('fa-icon', function(icon, params) {

app/assets/javascripts/discourse-common/lib/icon-library.js.es6

@@ -0,0 +1,68 @@
+import { h } from 'virtual-dom';
+let _renderers = [];
+
+export function renderIcon(renderType, id, params) {
+  for (let i=0; i<_renderers.length; i++) {
+    let renderer = _renderers[i];
+    let rendererForType = renderer[renderType];
+
+    if (rendererForType) {
+      let result = rendererForType(id, params || {});
+      if (result) {
+        return result;
+      }
+    }
+  }
+}
+
+export function iconHTML(id, params) {
+  return renderIcon('string', id, params);
+}
+
+export function iconNode(id, params) {
+  return renderIcon('node', id, params);
+}
+
+export function registerIconRenderer(renderer) {
+  _renderers.unshift(renderer);
+}
+
+// Support for font awesome icons
+function faClasses(id, params) {
+  let classNames = `fa fa-${id}`;
+  if (params) {
+    if (params.modifier) { classNames += " fa-" + params.modifier; }
+    if (params['class']) { classNames += ' ' + params['class']; }
+  }
+  return classNames;
+}
+
+// default resolver is font awesome
+registerIconRenderer({
+  name: 'font-awesome',
+
+  string(id, params) {
+    let html = `<i class='${faClasses(id, params)}'`;
+    if (params.title) { html += ` title='${I18n.t(params.title)}'`; }
+    if (params.label) { html += " aria-hidden='true'"; }
+    html += "></i>";
+    if (params.label) {
+      html += "<span class='sr-only'>" + I18n.t(params.label) + "</span>";
+    }
+    return html;
+  },
+
+  node(id, params) {
+    const properties = {
+      className: faClasses(id, params),
+      attributes: { "aria-hidden": true }
+    };
+
+    if (params.title) { properties.attributes.title = params.title; }
+    if (params.label) {
+      return h('i', properties, h('span.sr-only', I18n.t(params.label)));
+    } else {
+      return h('i', properties);
+    }
+  }
+});

app/assets/javascripts/discourse/components/categories-admin-dropdown.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import DropdownButton from 'discourse/components/dropdown-button';
 import computed from "ember-addons/ember-computed-decorators";
 

app/assets/javascripts/discourse/components/directory-toggle.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 export default Ember.Component.extend(bufferedRender({

app/assets/javascripts/discourse/components/global-notice.js.es6

@@ -1,5 +1,5 @@
 import { on } from 'ember-addons/ember-computed-decorators';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import LogsNotice from 'discourse/services/logs-notice';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 

app/assets/javascripts/discourse/components/group-index-toggle.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 export default Ember.Component.extend(bufferedRender({

app/assets/javascripts/discourse/components/input-tip.js.es6

@@ -1,5 +1,5 @@
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 export default Ember.Component.extend(bufferedRender({
   classNameBindings: [':tip', 'good', 'bad'],

app/assets/javascripts/discourse/components/notifications-button.js.es6

@@ -1,6 +1,6 @@
 import DropdownButton from 'discourse/components/dropdown-button';
 import { allLevels, buttonDetails } from 'discourse/lib/notification-levels';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import computed from 'ember-addons/ember-computed-decorators';
 
 export default DropdownButton.extend({

app/assets/javascripts/discourse/components/popup-input-tip.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 

app/assets/javascripts/discourse/components/tags-admin-dropdown.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import DropdownButton from 'discourse/components/dropdown-button';
 import computed from "ember-addons/ember-computed-decorators";
 

app/assets/javascripts/discourse/components/topic-footer-mobile-dropdown.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import Combobox from 'discourse-common/components/combo-box';
 import { observes } from 'ember-addons/ember-computed-decorators';
 

app/assets/javascripts/discourse/components/topic-status.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 import { escapeExpression } from 'discourse/lib/utilities';
 

app/assets/javascripts/discourse/controllers/full-page-search.js.es6

@@ -4,7 +4,7 @@ import { default as computed, observes } from 'ember-addons/ember-computed-decor
 import Category from 'discourse/models/category';
 import { escapeExpression } from 'discourse/lib/utilities';
 import { setTransient } from 'discourse/lib/page-tracker';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 const SortOrders = [
   {name: I18n.t('search.relevance'), id: 0},

app/assets/javascripts/discourse/helpers/category-link.js.es6

@@ -1,5 +1,5 @@
 import { registerUnbound } from 'discourse-common/lib/helpers';
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 var get = Em.get,
     escapeExpression = Handlebars.Utils.escapeExpression;

app/assets/javascripts/discourse/helpers/fa-icon-node.js.es6

@@ -1,20 +1,5 @@
-import { h } from 'virtual-dom';
+import { renderIcon } from 'discourse-common/lib/icon-library';
-import { iconClasses } from 'discourse-common/helpers/fa-icon';
 
-export function iconNode(icon, params) {
+export function iconNode(id, params) {
-  params = params ||  {};
+  return renderIcon('node', id, params);
-
-  const properties = {
-    className: iconClasses(icon, params),
-    attributes: { "aria-hidden": true }
-  };
-
-  if (params.title) { properties.attributes.title = params.title; }
-
-  if (params.label) {
-    return h('i', properties, h('span.sr-only', I18n.t(params.label)));
-  } else {
-    return h('i', properties);
-  }
 }
-

app/assets/javascripts/discourse/helpers/user-status.js.es6

@@ -1,4 +1,4 @@
-import { iconHTML } from 'discourse-common/helpers/fa-icon';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { htmlHelper } from 'discourse-common/lib/helpers';
 import { escapeExpression } from 'discourse/lib/utilities';
 

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -1,4 +1,4 @@
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { addDecorator } from 'discourse/widgets/post-cooked';
 import ComposerEditor from 'discourse/components/composer-editor';
 import { addButton } from 'discourse/widgets/post-menu';
@@ -19,6 +19,7 @@ import { addUserMenuGlyph } from 'discourse/widgets/user-menu';
 import { addPostClassesCallback } from 'discourse/widgets/post';
 import { addPostTransformCallback } from 'discourse/widgets/post-stream';
 import { attachAdditionalPanel } from 'discourse/widgets/header';
+import { registerIconRenderer } from 'discourse-common/lib/icon-library';
 
 
 // If you add any methods to the API ensure you bump up this number
@@ -58,6 +59,32 @@ class PluginApi {
     return klass;
   }
 
+  /**
+   * If you want to use custom icons in your discourse application,
+   * you can register a renderer that will return an icon in the
+   * format required.
+   *
+   * For example, the follwing resolver will render a smile in the place
+   * of every icon on Discourse.
+   *
+   * api.registerIconRenderer({
+   *   name: 'smile-icons',
+   *
+   *   // for the place in code that render a string
+   *   string() {
+   *     return "<i class='fa fa-smile-o'></i>";
+   *   },
+   *
+   *   // for the places in code that render virtual dom elements
+   *   node() {
+   *     return h('i', { className: 'fa fa-smile-o' });
+   *   }
+   * });
+   **/
+  registerIconRenderer(fn) {
+    registerIconRenderer(fn);
+  }
+
   /**
    * Used for decorating the `cooked` content of a post after it is rendered using
    * jQuery.

app/assets/javascripts/discourse/widgets/actions-summary.js.es6

@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { avatarFor } from 'discourse/widgets/post';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { h } from 'virtual-dom';
 import { dateNode } from 'discourse/helpers/node';
 import { userPath } from 'discourse/lib/url';

app/assets/javascripts/discourse/widgets/button.js.es6

@@ -1,5 +1,5 @@
 import { createWidget } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 
 
 const ButtonClass = {

app/assets/javascripts/discourse/widgets/embedded-post.js.es6

@@ -2,7 +2,7 @@ import PostCooked from 'discourse/widgets/post-cooked';
 import DecoratorHelper from 'discourse/widgets/decorator-helper';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import DiscourseURL from 'discourse/lib/url';
 
 createWidget('post-link-arrow', {

app/assets/javascripts/discourse/widgets/header-topic-info.js.es6

@@ -1,6 +1,6 @@
 import { applyDecorators, createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import DiscourseURL from 'discourse/lib/url';
 import RawHtml from 'discourse/widgets/raw-html';
 import renderTags from 'discourse/lib/render-tags';

app/assets/javascripts/discourse/widgets/header.js.es6

@@ -1,5 +1,5 @@
 import { createWidget } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { avatarImg } from 'discourse/widgets/post';
 import DiscourseURL from 'discourse/lib/url';
 import { wantsNewWindow } from 'discourse/lib/intercept-click';

app/assets/javascripts/discourse/widgets/home-logo.js.es6

@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { wantsNewWindow } from 'discourse/lib/intercept-click';
 import DiscourseURL from 'discourse/lib/url';
 

app/assets/javascripts/discourse/widgets/link.js.es6

@@ -1,6 +1,6 @@
 import { wantsNewWindow } from 'discourse/lib/intercept-click';
 import { createWidget } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { h } from 'virtual-dom';
 import DiscourseURL from 'discourse/lib/url';
 

app/assets/javascripts/discourse/widgets/post-admin-menu.js.es6

@@ -1,4 +1,4 @@
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 

app/assets/javascripts/discourse/widgets/post-edits-indicator.js.es6

@@ -1,5 +1,5 @@
 import { createWidget } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { longDate } from 'discourse/lib/formatter';
 import { h } from 'virtual-dom';
 

app/assets/javascripts/discourse/widgets/post-links.js.es6

@@ -1,4 +1,4 @@
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 import { replaceEmoji } from 'discourse/widgets/emoji';

app/assets/javascripts/discourse/widgets/post-small-action.js.es6

@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import RawHtml from 'discourse/widgets/raw-html';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { h } from 'virtual-dom';
 import { actionDescriptionHtml } from 'discourse/components/small-action';
 import { avatarFor } from 'discourse/widgets/post';

app/assets/javascripts/discourse/widgets/post.js.es6

@@ -1,7 +1,7 @@
 import PostCooked from 'discourse/widgets/post-cooked';
 import DecoratorHelper from 'discourse/widgets/decorator-helper';
 import { createWidget, applyDecorators } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { transformBasicPost } from 'discourse/lib/transform-post';
 import { h } from 'virtual-dom';
 import DiscourseURL from 'discourse/lib/url';

app/assets/javascripts/discourse/widgets/poster-name.js.es6

@@ -1,4 +1,4 @@
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 

app/assets/javascripts/discourse/widgets/private-message-map.js.es6

@@ -1,4 +1,4 @@
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 import { avatarFor } from 'discourse/widgets/post';

app/assets/javascripts/discourse/widgets/search-menu-results.js.es6

@@ -3,7 +3,7 @@ import { dateNode } from 'discourse/helpers/node';
 import RawHtml from 'discourse/widgets/raw-html';
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import highlightText from 'discourse/lib/highlight-text';
 
 class Highlighted extends RawHtml {

app/assets/javascripts/discourse/widgets/time-gap.js.es6

@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 
 function description(attrs) {
   const daysSince = attrs.daysSince;

app/assets/javascripts/discourse/widgets/topic-status.js.es6

@@ -1,5 +1,5 @@
 import { createWidget } from 'discourse/widgets/widget';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import { h } from 'virtual-dom';
 import { escapeExpression } from 'discourse/lib/utilities';
 

app/assets/javascripts/discourse/widgets/topic-timeline.js.es6

@@ -1,7 +1,7 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
 import { relativeAge } from 'discourse/lib/formatter';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import RawHtml from 'discourse/widgets/raw-html';
 
 const SCROLLAREA_HEIGHT = 300;

plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6

@@ -1,6 +1,6 @@
 import { createWidget } from 'discourse/widgets/widget';
 import { h } from 'virtual-dom';
-import { iconNode } from 'discourse/helpers/fa-icon-node';
+import { iconNode } from 'discourse-common/lib/icon-library';
 import RawHtml from 'discourse/widgets/raw-html';
 import { ajax } from 'discourse/lib/ajax';
 import evenRound from "discourse/plugins/poll/lib/even-round";