REFACTOR: Replace some fa-* uses with helpers

app/assets/javascripts/admin/components/resumable-upload.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 /*global Resumable:true */
@@ -40,7 +41,7 @@ export default Ember.Component.extend(bufferedRender({
 
   buildBuffer(buffer) {
     const icon = this.get("isUploading") ? "times" : "upload";
-    buffer.push(`<i class="fa fa-${icon}"></i>`);
+    buffer.push(iconHTML(icon));
     buffer.push("<span class='ru-label'>" + this.get("text") + "</span>");
     buffer.push("<span class='ru-progress' style='width:" + this.get("progress") + "%'></span>");
   },

app/assets/javascripts/admin/helpers/check-icon.js.es6

@@ -0,0 +1,7 @@
+import { registerUnbound } from 'discourse-common/lib/helpers';
+import { renderIcon } from 'discourse-common/lib/icon-library';
+
+registerUnbound('check-icon', function(value) {
+  let icon = value ? "check" : "times";
+  return new Handlebars.SafeString(renderIcon('string', icon));
+});

app/assets/javascripts/admin/models/admin-user.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { ajax } from 'discourse/lib/ajax';
 import computed from 'ember-addons/ember-computed-decorators';
 import { propertyNotEqual } from 'discourse/lib/computed';
@@ -108,7 +109,7 @@ const AdminUser = Discourse.User.extend({
             "class": "cancel-inline",
             "link":  true
           }, {
-            "label": '<i class="fa fa-exclamation-triangle"></i> ' + I18n.t("admin.user.delete_all_posts"),
+            "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("admin.user.delete_all_posts"),
             "class": "btn btn-danger",
             "callback": function() {
               ajax("/admin/users/" + user.get('id') + "/delete_all_posts", {
@@ -337,7 +338,7 @@ const AdminUser = Discourse.User.extend({
       "class": "cancel",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.block_accept'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.block_accept'),
       "class": "btn btn-danger",
       "callback": function() { performBlock(); }
     }];
@@ -386,7 +387,7 @@ const AdminUser = Discourse.User.extend({
       "class": "cancel",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.anonymize_yes'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.anonymize_yes'),
       "class": "btn btn-danger",
       "callback": function() { performAnonymize(); }
     }];
@@ -450,7 +451,7 @@ const AdminUser = Discourse.User.extend({
       "class": "btn",
       "link":  true
     }, {
-      "label": '<i class="fa fa-exclamation-triangle"></i>' + I18n.t('admin.user.delete_and_block'),
+      "label": `${iconHTML('exclamation-triangle')} ` + I18n.t('admin.user.delete_and_block'),
       "class": "btn btn-danger",
       "callback": function(){ performDestroy(true); }
     }, {
@@ -479,7 +480,7 @@ const AdminUser = Discourse.User.extend({
         "class": "cancel-inline",
         "link":  true
       }, {
-        "label": '<i class="fa fa-exclamation-triangle"></i> ' + I18n.t("flagging.yes_delete_spammer"),
+        "label": `${iconHTML('exclamation-triangle')} ` + I18n.t("flagging.yes_delete_spammer"),
         "class": "btn btn-danger",
         "callback": function() {
           return ajax("/admin/users/" + user.get('id') + '.json', {

app/assets/javascripts/admin/models/flagged-post.js.es6

@@ -2,7 +2,7 @@ import { ajax } from 'discourse/lib/ajax';
 import AdminUser from 'admin/models/admin-user';
 import Topic from 'discourse/models/topic';
 import Post from 'discourse/models/post';
-
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 const FlaggedPost = Post.extend({
 
@@ -35,13 +35,14 @@ const FlaggedPost = Post.extend({
 
   dispositionIcon: function (disposition) {
     if (!disposition) { return null; }
-    var icon, title = I18n.t('admin.flags.dispositions.' + disposition);
+    let icon;
+    let title = 'admin.flags.dispositions.' + disposition;
     switch (disposition) {
-      case "deferred": { icon = "fa-external-link"; break; }
+      case "deferred": { icon = "external-link"; break; }
-      case "agreed": { icon = "fa-thumbs-o-up"; break; }
+      case "agreed": { icon = "thumbs-o-up"; break; }
-      case "disagreed": { icon = "fa-thumbs-o-down"; break; }
+      case "disagreed": { icon = "thumbs-o-down"; break; }
     }
-    return "<i class='fa " + icon + "' title='" + title + "'></i>";
+    return iconHTML(icon, { title });
   },
 
   wasEdited: function () {

app/assets/javascripts/admin/templates/api-keys.hbs

@@ -29,5 +29,5 @@
 {{/if}}
 
 {{#unless hasMasterKey}}
-  <button class='btn' {{action "generateMasterKey"}}><i class="fa fa-key"></i>{{i18n 'admin.api.generate_master'}}</button>
+<button class='btn' {{action "generateMasterKey"}}>{{d-icon "key"}}</button>
 {{/unless}}

app/assets/javascripts/admin/templates/customize-colors-show.hbs

@@ -5,13 +5,13 @@
       {{#unless model.theme_id}}
       <button {{action "save"}} disabled={{model.disableSave}} class='btn'>{{i18n 'admin.customize.save'}}</button>
       {{/unless}}
-      <button {{action "copy" model}} class='btn'><i class="fa fa-copy"></i> {{i18n 'admin.customize.copy'}}</button>
+      <button {{action "copy" model}} class='btn'>{{d-icon "copy"}} {{i18n 'admin.customize.copy'}}</button>
-      <button {{action "copyToClipboard" model}} class='btn'><i class="fa fa-clipboard"></i> {{i18n 'admin.customize.copy_to_clipboard'}}</button>
+      <button {{action "copyToClipboard" model}} class='btn'>{{d-icon "clipboard"}} {{i18n 'admin.customize.copy_to_clipboard'}}</button>
       {{#if model.theme_id}}
       {{i18n "admin.customize.theme_owner"}}
       {{#link-to "adminCustomizeThemes.show" model.theme_id}}{{model.theme_name}}{{/link-to}}
       {{else}}
-      <button {{action "destroy"}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n 'admin.customize.delete'}}</button>
+      <button {{action "destroy"}} class='btn btn-danger'>{{d-icon "trash-o"}} {{i18n 'admin.customize.delete'}}</button>
       {{/if}}
       <span class="saving {{unless model.savingStatus 'hidden'}}">{{model.savingStatus}}</span>
     </div>

app/assets/javascripts/admin/templates/customize-themes-edit.hbs

@@ -53,7 +53,7 @@
         {{/each}}
         <li class='toggle-maximize'>
           <a {{action "toggleMaximize"}}>
-            <i class="fa fa-{{maximizeIcon}}"></i>
+            {{d-icon maximizeIcon}}
           </a>
         </li>
       </ul>

app/assets/javascripts/admin/templates/flags-list.hbs

@@ -19,7 +19,9 @@
                   {{#if flaggedPost.postAuthorFlagged}}
                     {{#if flaggedPost.user}}
                       {{#link-to 'adminUser' flaggedPost.user}}{{avatar flaggedPost.user imageSize="large"}}{{/link-to}}
-                      {{#if flaggedPost.wasEdited}}<i class="fa fa-pencil" title="{{i18n 'admin.flags.was_edited'}}"></i>{{/if}}
+                      {{#if flaggedPost.wasEdited}}
+                        {{d-icon "pencil" title="admin.flags.was_edited"}}
+                      {{/if}}
                     {{/if}}
                   {{/if}}
                   {{#if adminActiveFlagsView}}
@@ -90,7 +92,7 @@
                           {{format-age flagger.disposedAt}}
                           {{{flagger.dispositionIcon}}}
                           {{#if flagger.tookAction}}
-                            <i class='fa fa-gavel' title='{{i18n 'admin.flags.took_action'}}'></i>
+                            {{d-icon "gavel" title="admin.flags.took_action"}}
                           {{/if}}
                         </td>
                       </tr>
@@ -129,7 +131,8 @@
                       </p>
                     {{/if}}
                     <a href="{{unbound c.permalink}}">
-                      <button class='btn btn-reply'><i class="fa fa-reply"></i>&nbsp;{{i18n 'admin.flags.reply_message'}}</button>
+                      <button class='btn btn-reply'>{{d-icon "reply"}}&nbsp;{{i18n 'admin.flags.reply_message'}}</button>
+
                     </a>
                   {{/if}}
                 </div>
@@ -141,14 +144,14 @@
             <tr>
               <td colspan="3" class="action">
                 {{#if adminActiveFlagsView}}
-                  <button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree'}}&hellip;</button>
+                <button title='{{i18n 'admin.flags.agree_title'}}' class='btn' {{action "showAgreeFlagModal" flaggedPost}}>{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.agree'}}&hellip;</button>
                   {{#if flaggedPost.postHidden}}
-                    <button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
+                  <button title='{{i18n 'admin.flags.disagree_flag_unhide_post_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}>{{d-icon "thumbs-o-down"}}{{i18n 'admin.flags.disagree_flag_unhide_post'}}</button>
                   {{else}}
-                    <button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}><i class="fa fa-thumbs-o-down"></i>{{i18n 'admin.flags.disagree_flag'}}</button>
+                  <button title='{{i18n 'admin.flags.disagree_flag_title'}}' class='btn' {{action "disagreeFlags" flaggedPost}}>{{d-icon "thumbs-o-down"}}>{{i18n 'admin.flags.disagree_flag'}}</button>
                   {{/if}}
-                  <button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}><i class="fa fa-external-link"></i>{{i18n 'admin.flags.defer_flag'}}</button>
+                  <button title='{{i18n 'admin.flags.defer_flag_title'}}' class='btn' {{action "deferFlags" flaggedPost}}>{{d-icon "external-link"}}{{i18n 'admin.flags.defer_flag'}}</button>
-                  <button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}><i class="fa fa-trash-o"></i>{{i18n 'admin.flags.delete'}}&hellip;</button>
+                  <button title='{{i18n 'admin.flags.delete_title'}}' class='btn btn-danger' {{action "showDeleteFlagModal" flaggedPost}}>{{d-icon "trash-o"}}{{i18n 'admin.flags.delete'}}&hellip;</button>
                 {{/if}}
               </td>
             </tr>

app/assets/javascripts/admin/templates/modal/admin-agree-flag.hbs

@@ -1,13 +1,13 @@
 {{#d-modal-body title="admin.flags.agree_flag_modal_title"}}
   {{#if model.user_deleted}}
-    <button title="{{i18n 'admin.flags.agree_flag_restore_post_title'}}" {{action "agreeFlagRestorePost"}} class="btn"><i class="fa fa-thumbs-o-up"></i><i class="fa fa-eye"></i>{{i18n 'admin.flags.agree_flag_restore_post'}}</button>
+  <button title={{i18n 'admin.flags.agree_flag_restore_post_title'}} {{action "agreeFlagRestorePost"}} class="btn">{{d-icon "thumbs-o-up"}}{{d-icon "eye"}}{{i18n 'admin.flags.agree_flag_restore_post'}}</button>
   {{else}}
     {{#unless model.postHidden}}
-      <button title="{{i18n 'admin.flags.agree_flag_hide_post_title'}}" {{action "agreeFlagHidePost"}} class="btn"><i class="fa fa-thumbs-o-up"></i><i class="fa fa-eye-slash"></i>{{i18n 'admin.flags.agree_flag_hide_post'}}</button>
+    <button title="{{i18n 'admin.flags.agree_flag_hide_post_title'}}" {{action "agreeFlagHidePost"}} class="btn">{{d-icon "thumbs-o-up"}}{{d-icon "eye-slash"}}{{i18n 'admin.flags.agree_flag_hide_post'}}</button>
     {{/unless}}
   {{/if}}
-  <button title="{{i18n 'admin.flags.agree_flag_title'}}" {{action "agreeFlagKeepPost"}} class="btn"><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.agree_flag'}}</button>
+  <button title="{{i18n 'admin.flags.agree_flag_title'}}" {{action "agreeFlagKeepPost"}} class="btn">{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.agree_flag'}}</button>
   {{#if model.canDeleteAsSpammer}}
-    <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i>{{i18n 'admin.flags.delete_spammer'}}</button>
+  <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger">{{d-icon "exclamation-triangle"}}{{i18n 'admin.flags.delete_spammer'}}</button>
   {{/if}}
 {{/d-modal-body}}

app/assets/javascripts/admin/templates/modal/admin-badge-preview.hbs

@@ -24,7 +24,7 @@
 
     {{#if count_warning}}
       <div class="count-warning">
-        <p class="heading"><i class="fa fa-warning"></i> {{i18n 'admin.badges.preview.bad_count_warning.header'}}</p>
+        <p class="heading">{{d-icon "warning"}} {{i18n 'admin.badges.preview.bad_count_warning.header'}}</p>
         <p class="body">{{i18n 'admin.badges.preview.bad_count_warning.text'}}</p>
       </div>
     {{/if}}

app/assets/javascripts/admin/templates/modal/admin-delete-flag.hbs

@@ -1,7 +1,7 @@
 {{#d-modal-body title="admin.flags.delete_flag_modal_title"}}
-  <button title="{{i18n 'admin.flags.delete_post_defer_flag_title'}}" {{action "deletePostDeferFlag"}} class="btn"><i class="fa fa-trash-o"></i><i class="fa fa-external-link"></i>{{i18n 'admin.flags.delete_post_defer_flag'}}</button>
+<button title="{{i18n 'admin.flags.delete_post_defer_flag_title'}}" {{action "deletePostDeferFlag"}} class="btn">{{d-icon "trash-o"}}{{d-icon "external-link"}}{{i18n 'admin.flags.delete_post_defer_flag'}}</button>
-  <button title="{{i18n 'admin.flags.delete_post_agree_flag_title'}}" {{action "deletePostAgreeFlag"}} class="btn"><i class="fa fa-trash-o"></i><i class="fa fa-thumbs-o-up"></i>{{i18n 'admin.flags.delete_post_agree_flag'}}</button>
+<button title="{{i18n 'admin.flags.delete_post_agree_flag_title'}}" {{action "deletePostAgreeFlag"}} class="btn">{{d-icon "trash-o"}}{{d-icon "thumbs-o-up"}}{{i18n 'admin.flags.delete_post_agree_flag'}}</button>
   {{#if model.canDeleteAsSpammer}}
-    <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger"><i class="fa fa-exclamation-triangle"></i>{{i18n 'admin.flags.delete_spammer'}}</button>
+  <button title="{{i18n 'admin.flags.delete_spammer_title'}}" {{action "deleteSpammer" model.user}} class="btn btn-danger">{{d-icon "exclamation-triangle"}}{{i18n 'admin.flags.delete_spammer'}}</button>
   {{/if}}
 {{/d-modal-body}}

app/assets/javascripts/admin/templates/modal/admin-suspend-user.hbs

@@ -11,6 +11,6 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  <button class='btn btn-danger' {{action "suspend"}} disabled={{submitDisabled}}><i class='fa fa-ban'></i>{{i18n 'admin.user.suspend'}}</button>
+  <button class='btn btn-danger' {{action "suspend"}} disabled={{submitDisabled}}>{{d-icon "ban"}}{{i18n 'admin.user.suspend'}}</button>
   <a {{action "closeModal"}}>{{i18n 'cancel'}}</a>
 </div>

app/assets/javascripts/admin/templates/user-badges.hbs

@@ -1,7 +1,7 @@
 <div class='admin-controls'>
   <div class='span15'>
     <ul class='nav nav-pills'>
-      <li>{{#link-to 'adminUser' user}}<i class="fa fa-caret-left"></i> &nbsp;{{user.username}}{{/link-to}}</li>
+      <li>{{#link-to 'adminUser' user}}{{d-icon "caret-left"}} &nbsp;{{user.username}}{{/link-to}}</li>
     </ul>
   </div>
 </div>

app/assets/javascripts/admin/templates/user-index.hbs

@@ -281,9 +281,11 @@
     <div class="controls">
       {{#if model.canLockTrustLevel}}
         {{#if model.trust_level_locked}}
-          <i title='{{i18n 'admin.user.trust_level_locked_tip'}}' class='fa fa-lock'></i> {{d-button action="lockTrustLevel" actionParam=false label="admin.user.unlock_trust_level"}}
+          {{d-icon "lock" title="admin.user.trust_level_locked_tip"}}
+          {{d-button action="lockTrustLevel" actionParam=false label="admin.user.unlock_trust_level"}}
         {{else}}
-          <i title='{{i18n 'admin.user.trust_level_unlocked_tip'}}' class='fa fa-unlock'></i> {{d-button action="lockTrustLevel" actionParam=true label="admin.user.lock_trust_level"}}
+          {{d-icon "unlock" title="admin.user.trust_level_unlocked_tip"}}
+          {{d-button action="lockTrustLevel" actionParam=true label="admin.user.lock_trust_level"}}
         {{/if}}
       {{/if}}
       {{#if model.tl3Requirements}}

app/assets/javascripts/admin/templates/user-tl3-requirements.hbs

@@ -1,7 +1,7 @@
 <div class='admin-controls'>
   <div class='span15'>
     <ul class="nav nav-pills">
-      <li>{{#link-to 'adminUser' model}}<i class="fa fa-caret-left"></i> &nbsp;{{model.username}}{{/link-to}}</li>
+      <li>{{#link-to 'adminUser' model}}{{d-icon "caret-left"}} &nbsp;{{model.username}}{{/link-to}}</li>
       <li>{{#link-to 'adminUsersList.show' 'member'}}{{i18n 'admin.user.trust_level_2_users'}}{{/link-to}}</li>
     </ul>
   </div>
@@ -24,7 +24,7 @@
     <tbody>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.visits'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.days_visited 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.days_visited}}</td>
         <td>
           {{model.tl3Requirements.days_visited_percent}}% ({{model.tl3Requirements.days_visited}} / {{model.tl3Requirements.time_period}} {{i18n 'admin.user.tl3_requirements.days'}})
         </td>
@@ -32,67 +32,67 @@
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_replied_to'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_replied_to 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_replied_to}}</td>
         <td>{{model.tl3Requirements.num_topics_replied_to}}</td>
         <td>{{model.tl3Requirements.min_topics_replied_to}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_viewed'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_viewed 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_viewed}}</td>
         <td>{{model.tl3Requirements.topics_viewed}}</td>
         <td>{{model.tl3Requirements.min_topics_viewed}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.topics_viewed_all_time'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.topics_viewed_all_time 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.topics_viewed_all_time}}</td>
         <td>{{model.tl3Requirements.topics_viewed_all_time}}</td>
         <td>{{model.tl3Requirements.min_topics_viewed_all_time}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.posts_read'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.posts_read 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.posts_read}}</td>
         <td>{{model.tl3Requirements.posts_read}}</td>
         <td>{{model.tl3Requirements.min_posts_read}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.posts_read_all_time'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.posts_read_all_time 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.posts_read_all_time}}</td>
         <td>{{model.tl3Requirements.posts_read_all_time}}</td>
         <td>{{model.tl3Requirements.min_posts_read_all_time}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.flagged_posts'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.flagged_posts 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.flagged_posts}}</td>
         <td>{{model.tl3Requirements.num_flagged_posts}}</td>
         <td>{{i18n 'max_of_count' count=model.tl3Requirements.max_flagged_posts}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.flagged_by_users'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.flagged_by_users 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.flagged_by_users}}</td>
         <td>{{model.tl3Requirements.num_flagged_by_users}}</td>
         <td>{{i18n 'max_of_count' count=model.tl3Requirements.max_flagged_by_users}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_given'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_given 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_given}}</td>
         <td>{{model.tl3Requirements.num_likes_given}}</td>
         <td>{{model.tl3Requirements.min_likes_given}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received}}</td>
         <td>{{model.tl3Requirements.num_likes_received}}</td>
         <td>{{model.tl3Requirements.min_likes_received}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received_days'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received_days 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received_days}}</td>
         <td>{{model.tl3Requirements.num_likes_received_days}}</td>
         <td>{{model.tl3Requirements.min_likes_received_days}}</td>
       </tr>
       <tr>
         <th>{{i18n 'admin.user.tl3_requirements.likes_received_users'}}</th>
-        <td><i class="fa {{if model.tl3Requirements.met.likes_received_users 'fa-check' 'fa-times'}}"></i></td>
+        <td>{{check-icon model.tl3Requirements.met.likes_received_users}}</td>
         <td>{{model.tl3Requirements.num_likes_received_users}}</td>
         <td>{{model.tl3Requirements.min_likes_received_users}}</td>
       </tr>
@@ -105,16 +105,16 @@
       {{#if model.tl3Requirements.requirements_lost}}
         {{! tl implicitly not locked }}
         {{#if model.tl3Requirements.on_grace_period}}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
         {{else}} {{! not on grace period }}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
                                       {{i18n 'admin.user.tl3_requirements.will_be_demoted'}}
         {{/if}}
       {{else}} {{! requirements not lost - remains tl3 }}
         {{#if model.tl3Requirements.trust_level_locked}}
-          <i class="fa fa-lock"></i> {{i18n 'admin.user.tl3_requirements.locked_will_not_be_demoted'}}
+          {{d-icon "lock"}} {{i18n 'admin.user.tl3_requirements.locked_will_not_be_demoted'}}
         {{else}} {{! tl not locked }}
-          <i class="fa fa-check"></i> {{i18n 'admin.user.tl3_requirements.qualifies'}}
+          {{d-icon "check"}} {{i18n 'admin.user.tl3_requirements.qualifies'}}
           {{#if model.tl3Requirements.on_grace_period}}
             {{i18n 'admin.user.tl3_requirements.on_grace_period'}}
           {{/if}}
@@ -123,13 +123,13 @@
     {{else}} {{! is not tl3 }}
       {{#if model.tl3Requirements.requirements_met}}
         {{! met & not tl3 - will be promoted}}
-        <i class="fa fa-check"></i> {{i18n 'admin.user.tl3_requirements.qualifies'}}
+        {{d-icon "check"}} {{i18n 'admin.user.tl3_requirements.qualifies'}}
                                     {{i18n 'admin.user.tl3_requirements.will_be_promoted'}}
       {{else}} {{! requirements not met - remains regular }}
         {{#if model.tl3Requirements.trust_level_locked}}
-          <i class="fa fa-lock"></i> {{i18n 'admin.user.tl3_requirements.locked_will_not_be_promoted'}}
+          {{d-icon "lock"}} {{i18n 'admin.user.tl3_requirements.locked_will_not_be_promoted'}}
         {{else}}
-          <i class="fa fa-times"></i> {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
+          {{d-icon "times"}} {{i18n 'admin.user.tl3_requirements.does_not_qualify'}}
         {{/if}}
       {{/if}}
     {{/if}}

app/assets/javascripts/discourse-common/components/combo-box.js.es6

@@ -1,5 +1,6 @@
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 import { on, observes } from 'ember-addons/ember-computed-decorators';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 export default Ember.Component.extend(bufferedRender({
   tagName: 'select',
@@ -97,7 +98,7 @@ export default Ember.Component.extend(bufferedRender({
       this.selectionTemplate = (item) => {
         let name = Em.get(item, 'text');
         name = Handlebars.escapeExpression(name);
-        return `<i class='fa fa-${this.get("selectionIcon")}'></i>${name}`;
+        return iconHTML(this.get('selectionIcon')) + name;
       };
     }
 

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

@@ -42,10 +42,11 @@ registerIconRenderer({
   name: 'font-awesome',
 
   string(id, params) {
-    let html = `<i class='${faClasses(id, params)}'`;
+    let tagName = params.tagName || 'i';
+    let html = `<${tagName} class='${faClasses(id, params)}'`;
     if (params.title) { html += ` title='${I18n.t(params.title)}'`; }
     if (params.label) { html += " aria-hidden='true'"; }
-    html += "></i>";
+    html += `></${tagName}>`;
     if (params.label) {
       html += "<span class='sr-only'>" + I18n.t(params.label) + "</span>";
     }

app/assets/javascripts/discourse/components/auto-update-input-selector.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { default as computed, observes } from "ember-addons/ember-computed-decorators";
 import Combobox from 'discourse-common/components/combo-box';
 import { CLOSE_STATUS_TYPE } from 'discourse/controllers/edit-topic-timer';
@@ -111,9 +112,7 @@ export default Combobox.extend({
     let icons;
 
     if (icon) {
-      icons = icon.split(',').map(i => {
+      icons = icon.split(',').map(i => iconHTML(i)).join(" ");
-        return `<i class='fa fa-${i}'/>`;
-      }).join(" ");
     }
 
     if (time) {

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

@@ -15,14 +15,14 @@ export default DropdownButton.extend({
       { id: 'create',
         title: I18n.t('category.create'),
         description: I18n.t('category.create_long'),
-        styleClasses: 'fa fa-plus' }
+        icon: 'plus' }
     ];
     if (includeReorder) {
       items.push({
         id: 'reorder',
         title: I18n.t('categories.reorder.title'),
         description: I18n.t('categories.reorder.title_long'),
-        styleClasses: 'fa fa-random'
+        icon: 'random'
       });
     }
     return items;

app/assets/javascripts/discourse/components/category-drop.js.es6

@@ -1,4 +1,6 @@
 import { setting } from 'discourse/lib/computed';
+import computed from 'ember-addons/ember-computed-decorators';
+
 var get = Ember.get;
 
 export default Ember.Component.extend({
@@ -8,10 +10,10 @@ export default Ember.Component.extend({
 
   tagName: 'li',
 
-  iconClass: function() {
+  @computed('expanded')
-    if (this.get('expanded')) { return "fa fa-caret-down"; }
+  expandIcon(expanded) {
-    return "fa fa-caret-right";
+    return expanded ? 'caret-down' : 'caret-right';
-  }.property('expanded'),
+  },
 
   allCategoriesUrl: function() {
     if (this.get('subCategory')) {

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

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 
 export default Ember.Component.extend(bufferedRender({
@@ -29,7 +30,7 @@ export default Ember.Component.extend(bufferedRender({
       buffer.push("<h4 class='title'>" + title + "</h4>");
     }
 
-    buffer.push(`<button class='btn standard dropdown-toggle ${this.get('buttonExtraClasses')}' data-toggle='dropdown'>${this.get('text')}</button>`);
+    buffer.push(`<button class='btn standard dropdown-toggle ${this.get('buttonExtraClasses') || ''}' data-toggle='dropdown'>${this.get('text')}</button>`);
     buffer.push("<ul class='dropdown-menu'>");
 
     const contents = this.get('dropDownContent');
@@ -40,7 +41,15 @@ export default Ember.Component.extend(bufferedRender({
               className = (self.get('activeItem') === id ? 'disabled': '');
 
         buffer.push("<li data-id=\"" + id + "\" class=\"" + className + "\"><a href>");
-        buffer.push("<span class='icon " + row.styleClasses + "'></span>");
+
+        if (row.icon) {
+          let iconClass = 'icon';
+          if (row.iconClass) {
+            iconClass += ` ${row.iconClass}`;
+          }
+          buffer.push(iconHTML(row.icon, { tagName: 'span', class: iconClass }));
+        }
+
         buffer.push("<div><span class='title'>" + row.title + "</span>");
         buffer.push("<span>" + row.description + "</span></div>");
         buffer.push("</a></li>");

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

@@ -22,7 +22,8 @@ export default DropdownButton.extend({
         id: l.id,
         title: I18n.t(`${start}.title`),
         description: I18n.t(`${start}.description`),
-        styleClasses: `${l.key.dasherize()} fa fa-${l.icon}`
+        icon: l.icon,
+        iconClass: l.key.dasherize(),
       };
     });
   },

app/assets/javascripts/discourse/components/period-chooser.js.es6

@@ -25,7 +25,7 @@ export default Ember.Component.extend(CleansUp, {
 
     if (!this.get('showPeriods')) {
       if (!this.site.mobileView) {
-        const $chevron = this.$('i.fa-caret-down');
+        const $chevron = this.$('.d-icon-caret-down');
         this.$('#period-popup').css($chevron.position());
       } else {
         this.$('#period-popup').css({top: this.$().height()});

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

@@ -1,3 +1,5 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
+import computed from 'ember-addons/ember-computed-decorators';
 import DropdownButton from 'discourse/components/dropdown-button';
 
 export default DropdownButton.extend({
@@ -28,21 +30,28 @@ export default DropdownButton.extend({
       {id: 'pinned',
        title: I18n.t('topic_statuses.pinned' + globally + '.title'),
        description: I18n.t('topic_statuses.pinned' + globally + '.help'),
-       styleClasses: 'fa fa-thumb-tack' },
+       icon: 'thumb-tack' },
       {id: 'unpinned',
        title: I18n.t('topic_statuses.unpinned.title'),
        description: I18n.t('topic_statuses.unpinned.help'),
-       styleClasses: 'fa fa-thumb-tack unpinned' }
+       icon: 'thumb-tack',
+       iconClass: 'unpinned' }
     ];
   }.property(),
 
-  text: function() {
+  @computed('topic.pinned', 'topic.pinned_globally')
-    const globally = this.get('topic.pinned_globally') ? '_globally' : '';
+  text(pinned, pinnedGlobally) {
-    const state = this.get('topic.pinned') ? 'pinned' + globally : 'unpinned';
+    const globally = pinnedGlobally ? '_globally' : '';
+    const state = pinned ? 'pinned' + globally : 'unpinned';
 
-    return '<span class="fa fa-thumb-tack' + (state === 'unpinned' ? ' unpinned' : "") +  '"></span> ' +
+    const icon = iconHTML(
+      'thumb-tack',
+      { tagName: 'span', class: (state === 'unpinned' ? 'unpinned' : null) }
+    );
+
+    return icon +
       I18n.t('topic_statuses.' + state + '.title') + "<span class='caret'></span>";
-  }.property('topic.pinned', 'topic.unpinned'),
+  },
 
   clicked(id) {
     const topic = this.get('topic');

app/assets/javascripts/discourse/components/tag-drop.js.es6

@@ -21,9 +21,8 @@ export default Ember.Component.extend({
   },
 
   @computed('expanded')
-  iconClass() {
+  expandedIcon(expanded) {
-    if (this.get('expanded')) { return "fa fa-caret-down"; }
+    return expanded ? 'caret-down' : 'caret-right';
-    return "fa fa-caret-right";
   },
 
   @computed('tagId')

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

@@ -14,7 +14,7 @@ export default DropdownButton.extend({
       { id: 'manageGroups',
         title: I18n.t('tagging.manage_groups'),
         description: I18n.t('tagging.manage_groups_description'),
-        styleClasses: 'fa fa-wrench' }
+        icon: 'wrench' }
     ];
     return items;
   },

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

@@ -8,7 +8,7 @@ export default Ember.Component.extend(bufferedRender({
   rerenderTriggers: ['topic.archived', 'topic.closed', 'topic.pinned', 'topic.visible', 'topic.unpinned', 'topic.is_warning'],
 
   click(e) {
-    if ($(e.target).hasClass('fa-thumb-tack')) {
+    if ($(e.target).hasClass('d-icon-thumb-tack')) {
       const topic = this.get('topic');
 
       // only pin unpin for now

app/assets/javascripts/discourse/components/topic-timer-info.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { bufferedRender } from 'discourse-common/lib/buffered-render';
 import Category from 'discourse/models/category';
 
@@ -35,7 +36,7 @@ export default Ember.Component.extend(bufferedRender({
 
     let autoCloseHours = this.get("duration") || 0;
 
-    buffer.push('<h3><i class="fa fa-clock-o"></i> ');
+    buffer.push(`<h3>${iconHTML('clock-o')} `);
 
     let options = {
       timeLeft: duration.humanize(true),

app/assets/javascripts/discourse/controllers/flag.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import ModalFunctionality from 'discourse/mixins/modal-functionality';
 import ActionSummary from 'discourse/models/action-summary';
 import { MAX_MESSAGE_LENGTH } from 'discourse/models/post-action-type';
@@ -83,9 +84,9 @@ export default Ember.Controller.extend(ModalFunctionality, {
 
   submitText: function(){
     if (this.get('selected.is_custom_flag')) {
-      return "<i class='fa fa-envelope'></i>" + (I18n.t(this.get('flagTopic') ? "flagging_topic.notify_action" : "flagging.notify_action"));
+      return iconHTML('envelope') + (I18n.t(this.get('flagTopic') ? "flagging_topic.notify_action" : "flagging.notify_action"));
     } else {
-      return "<i class='fa fa-flag'></i>" + (I18n.t(this.get('flagTopic') ? "flagging_topic.action" : "flagging.action"));
+      return iconHTML('flag') + (I18n.t(this.get('flagTopic') ? "flagging_topic.action" : "flagging.action"));
     }
   }.property('selected.is_custom_flag'),
 

app/assets/javascripts/discourse/controllers/preferences/account.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import CanCheckEmails from 'discourse/mixins/can-check-emails';
 import { default as computed } from "ember-addons/ember-computed-decorators";
 import PreferencesTabController from "discourse/mixins/preferences-tab-controller";
@@ -81,7 +82,7 @@ export default Ember.Controller.extend(CanCheckEmails, PreferencesTabController,
             link:  true,
             callback: () => { this.set('deleting', false); }
           },
-          { label: '<i class="fa fa-exclamation-triangle"></i> ' + I18n.t("user.delete_account"),
+          { label: iconHTML('exclamation-triangle') + I18n.t("user.delete_account"),
             class: "btn btn-danger",
             callback() {
               model.delete().then(function() {

app/assets/javascripts/discourse/controllers/topic.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import BufferedContent from 'discourse/mixins/buffered-content';
 import SelectedPostsCount from 'discourse/mixins/selected-posts-count';
 import { spinnerHTML } from 'discourse/helpers/loading-spinner';
@@ -113,7 +114,7 @@ export default Ember.Controller.extend(SelectedPostsCount, BufferedContent, {
   @computed('model')
   suggestedTitle(model) {
     return model.get('isPrivateMessage') ?
-      `<a href="${this.get('pmPath')}"><i class='private-message-glyph fa fa-envelope'></i></a> ${I18n.t("suggested_topics.pm_title")}` :
+      `<a href="${this.get('pmPath')}">${iconHTML('envelope', { class: 'private-message-glyph' })}</a> ${I18n.t("suggested_topics.pm_title")}` :
       I18n.t("suggested_topics.title");
   },
 

app/assets/javascripts/discourse/helpers/icon-or-image.js.es6

@@ -1,6 +1,7 @@
 import { htmlHelper } from 'discourse-common/lib/helpers';
+import { iconHTML } from 'discourse-common/lib/icon-library';
 
 export default htmlHelper(function(str) {
   if (Ember.isEmpty(str)) { return ""; }
-  return (str.indexOf('fa-') === 0) ? `<i class='fa ${str}'></i>` : `<img src='${str}'>`;
+  return (str.indexOf('fa-') === 0) ? iconHTML(str) : `<img src='${str}'>`;
 });

app/assets/javascripts/discourse/initializers/sharing-sources.js.es6

@@ -6,7 +6,7 @@ export default {
   initialize: function() {
     Sharing.addSource({
       id: 'twitter',
-      faIcon: 'fa-twitter-square',
+      icon: 'twitter-square',
       generateUrl: function(link, title) {
         return "http://twitter.com/intent/tweet?url=" + encodeURIComponent(link) + "&text=" + encodeURIComponent(title);
       },
@@ -17,7 +17,7 @@ export default {
 
     Sharing.addSource({
       id: 'facebook',
-      faIcon: 'fa-facebook-square',
+      icon: 'facebook-square',
       title: I18n.t('share.facebook'),
       generateUrl: function(link, title) {
         return "http://www.facebook.com/sharer.php?u=" + encodeURIComponent(link) + '&t=' + encodeURIComponent(title);
@@ -27,7 +27,7 @@ export default {
 
     Sharing.addSource({
       id: 'google+',
-      faIcon: 'fa-google-plus-square',
+      icon: 'google-plus-square',
       title: I18n.t('share.google+'),
       generateUrl: function(link) {
         return "https://plus.google.com/share?url=" + encodeURIComponent(link);
@@ -38,7 +38,7 @@ export default {
 
     Sharing.addSource({
       id: 'email',
-      faIcon: 'fa-envelope-square',
+      icon: 'envelope-square',
       title: I18n.t('share.email'),
       generateUrl: function(link, title) {
         return "mailto:?to=&subject=" + encodeURIComponent('[' + Discourse.SiteSettings.title + '] ' + title) + "&body=" + encodeURIComponent(link);

app/assets/javascripts/discourse/lib/autocomplete.js.es6

@@ -3,6 +3,7 @@
 
   @module $.fn.autocomplete
 **/
+import { iconHTML } from 'discourse-common/lib/icon-library';
 export const CANCELLED_STATUS = "__CANCELLED";
 import { setCaretPosition, caretPosition } from 'discourse/lib/utilities';
 
@@ -105,7 +106,7 @@ export default function(options) {
     transformed = _.isArray(transformedItem) ? transformedItem : [transformedItem || item];
 
     const divs = transformed.map(itm => {
-      let d = $(`<div class='item'><span>${itm}<a class='remove' href><i class='fa fa-times'></i></a></span></div>`);
+      let d = $(`<div class='item'><span>${itm}<a class='remove' href>${iconHTML('times')}</a></span></div>`);
       const $parent = me.parent();
       const prev = $parent.find('.item:last');
 

app/assets/javascripts/discourse/lib/sharing.js.es6

@@ -9,9 +9,9 @@
       // This id must be present in the `share_links` site setting too
       id: 'twitter',
 
-      // The icon that will be displayed, choose between font awesome class name `faIcon` and custom HTML `htmlIcon`.
+      // The icon that will be displayed, choose between icon name `icon` and custom HTML `htmlIcon`.
-      // When both provided, prefer `faIcon`
+      // When both provided, prefer `icon`
-      faIcon: 'fa-twitter-square'
+      icon: 'twitter-square'
       htmlIcon: '<img src="example.com/example.jpg">',
 
       // A callback for generating the remote link from the `link` and `title`
@@ -30,6 +30,12 @@ var _sources = {};
 
 export default {
   addSource(source) {
+    // backwards compatibility for plugins
+    if (source.faIcon) {
+      source.icon = source.faIcon.replace('fa-', '');
+      delete source.faIcon;
+    }
+
     _sources[source.id] = source;
   },
 

app/assets/javascripts/discourse/models/composer.js.es6

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import RestModel from 'discourse/models/rest';
 import Topic from 'discourse/models/topic';
 import { throwAjaxError } from 'discourse/lib/ajax-error';
@@ -191,7 +192,7 @@ const Composer = RestModel.extend({
         const replyUsername = post.get('reply_to_user.username');
         const replyAvatarTemplate = post.get('reply_to_user.avatar_template');
         if (replyUsername && replyAvatarTemplate && this.get('action') === EDIT) {
-          postDescription += " <i class='fa fa-mail-forward reply-to-glyph'></i> " + tinyAvatar(replyAvatarTemplate) + " " + replyUsername;
+          postDescription += ` ${iconHTML('mail-forward', { class: 'reply-to-glyph' })} ` + tinyAvatar(replyAvatarTemplate) + " " + replyUsername;
         }
       }
     }
@@ -242,10 +243,10 @@ const Composer = RestModel.extend({
   // The icon for the save button
   saveIcon: function () {
     switch (this.get('action')) {
-      case EDIT: return '<i class="fa fa-pencil"></i>';
+      case EDIT: return iconHTML('pencil');
-      case REPLY: return '<i class="fa fa-reply"></i>';
+      case REPLY: return iconHTML('reply');
-      case CREATE_TOPIC: return '<i class="fa fa-plus"></i>';
+      case CREATE_TOPIC: iconHTML('plus');
-      case PRIVATE_MESSAGE: return '<i class="fa fa-envelope"></i>';
+      case PRIVATE_MESSAGE: iconHTML('envelope');
     }
   }.property('action'),
 

app/assets/javascripts/discourse/models/user-action.js.es6

@@ -120,10 +120,10 @@ const UserAction = RestModel.extend({
     let groups = this.get("childGroups");
     if (!groups) {
       groups = {
-        likes: UserActionGroup.create({ icon: "fa fa-heart" }),
+        likes: UserActionGroup.create({ icon: "heart" }),
-        stars: UserActionGroup.create({ icon: "fa fa-star" }),
+        stars: UserActionGroup.create({ icon: "star" }),
-        edits: UserActionGroup.create({ icon: "fa fa-pencil" }),
+        edits: UserActionGroup.create({ icon: "pencil" }),
-        bookmarks: UserActionGroup.create({ icon: "fa fa-bookmark" })
+        bookmarks: UserActionGroup.create({ icon: "bookmark" })
       };
     }
     this.set("childGroups", groups);

app/assets/javascripts/discourse/raw-views/topic-list-header-column.js.es6

@@ -7,8 +7,8 @@ export default Ember.Object.extend({
     return I18n.t(this.name);
   }.property(),
 
-  sortClass: function(){
+  sortIcon: function() {
-    return "fa fa-chevron-" + (this.parent.ascending ? "up" : "down");
+    return "chevron-" + (this.parent.ascending ? "up" : "down");
   }.property(),
 
   isSorting: function(){

app/assets/javascripts/discourse/templates/components/category-drop.hbs

@@ -15,7 +15,9 @@
 {{/if}}
 
 {{#if categories}}
-  <a href {{action "expand"}} class={{dropdownButtonClass}} style={{badgeStyle}}><i class={{iconClass}}></i></a>
+  <a href {{action "expand"}} class={{dropdownButtonClass}} style={{badgeStyle}}>
+    {{d-icon expandIcon}}
+  </a>
   <section class="{{unless expanded 'hidden'}} category-dropdown-menu chooser">
     <div class='cat'><a href={{allCategoriesUrl}} data-drop-close="true" class='badge-category home'>{{allCategoriesLabel}}</a></div>
     {{#if subCategory}}

app/assets/javascripts/discourse/templates/components/discourse-banner.hbs

@@ -1,7 +1,9 @@
 {{#if visible}}
   <div class="row">
     <div id="banner" class={{overlay}}>
-      <div class="close" {{action "dismiss"}}><i class="fa fa-times" title="{{i18n 'banner.close'}}"></i></div>
+      <div class="close" {{action "dismiss"}}>
+        {{d-icon "times" title="banner.close"}}
+      </div>
       <div id="banner-content">
         {{{banner.html}}}
         {{#if currentUser.staff}}

app/assets/javascripts/discourse/templates/components/queued-post.hbs

@@ -11,7 +11,7 @@
           {{post.user.username}}
         {{/user-link}}
         {{#if post.user.blocked}}
-        <i class='fa fa-ban' title='{{i18n "user.blocked_tooltip"}}'></i>
+          {{d-icon "ban" title="user.blocked_tooltip"}}
         {{/if}}
       </span>
     </div>

app/assets/javascripts/discourse/templates/components/share-source.hbs

@@ -1,6 +1,6 @@
 <a href {{action "share" source}} title="{{unbound source.title}}" aria-label="{{unbound source.title}}" >
-  {{#if source.faIcon}}
+  {{#if source.icon}}
-    <i class="fa {{source.faIcon}}"></i>
+    {{d-icon source.icon}}
   {{else}}
     {{{source.htmlIcon}}}
   {{/if}}

app/assets/javascripts/discourse/templates/components/stream-item.hbs

@@ -27,7 +27,7 @@
 
 {{#each item.children as |child|}}
   <div class='child-actions'>
-    <i class="icon {{child.icon}}"></i>
+    {{d-icon child.icon class="icon"}}
     {{#each child.items as |grandChild|}}
       {{#if grandChild.removableBookmark}}
         <button class="btn btn-default remove-bookmark" {{action removeBookmark grandChild}}>

app/assets/javascripts/discourse/templates/components/tag-drop.hbs

@@ -10,7 +10,9 @@
   {{/if}}
 
   {{#if tags}}
-    <a href {{action "expand"}} class={{dropdownButtonClass}}><i class={{iconClass}}></i></a>
+    <a href {{action "expand"}} class={{dropdownButtonClass}}>
+      {{d-icon expandedIcon}}
+    </a>
     <section class="{{unless expanded 'hidden'}} category-dropdown-menu chooser">
       <div class='cat'><a href={{allTagsUrl}} data-drop-close="true" class='badge-category home'>{{allTagsLabel}}</a></div>
       <div class='cat'><a href={{noTagsUrl}}  data-drop-close="true" class='badge-category home'>{{noTagsLabel}}</a></div>

app/assets/javascripts/discourse/templates/composer.hbs

@@ -112,7 +112,9 @@
 
                 {{#if site.mobileView}}
                 {{#if whisperOrUnlistTopic}}
-                  <span class='whisper'><i class='fa fa-eye-slash'></i></span>
+                  <span class='whisper'>
+                    {{d-icon "eye-slash"}}
+                  </span>
                 {{/if}}
                 {{/if}}
               </div>

app/assets/javascripts/discourse/templates/discovery/topics.hbs

@@ -8,7 +8,7 @@
       <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics-top' class='btn dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
     {{/if}}
     {{#if showResetNew}}
-      <button id='dismiss-new-top' class='btn dismiss-read' {{action "resetNew"}}><i class="fa fa-check"></i> {{i18n 'topics.bulk.dismiss_new'}}</button>
+    <button id='dismiss-new-top' class='btn dismiss-read' {{action "resetNew"}}>{{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
     {{/if}}
   </div>
 {{/if}}
@@ -60,7 +60,8 @@
       <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
     {{/if}}
     {{#if showResetNew}}
-      <button id='dismiss-new' class='btn dismiss-read' {{action "resetNew"}}><i class="fa fa-check"></i> {{i18n 'topics.bulk.dismiss_new'}}</button>
+      <button id='dismiss-new' class='btn dismiss-read' {{action "resetNew"}}>
+        {{d-icon "check"}} {{i18n 'topics.bulk.dismiss_new'}}</button>
     {{/if}}
 
     {{#if latest}}

app/assets/javascripts/discourse/templates/exception.hbs

@@ -7,7 +7,7 @@
     </div>
     <div class="desc">
       {{#if networkFixed}}
-        <i class="fa fa-check-circle"></i>
+        {{d-icon "check-circle"}}
       {{/if}}
 
       {{desc}}

app/assets/javascripts/discourse/templates/invites/show.hbs

@@ -42,7 +42,8 @@
              {{input-tip validation=passwordValidation}}
             <div class="instructions">
               {{passwordInstructions}} {{i18n 'invites.optional_description'}}
-              <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div>
+              <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
+                {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
             </div>
           </div>
 

app/assets/javascripts/discourse/templates/list/action-list.raw.hbs

@@ -1,6 +1,6 @@
 {{#if postNumbers}}
 <div class='post-actions {{className}}'>
-  <i class='fa fa-{{icon}}'></i>
+  {{d-icon icon}}
   {{#each postNumbers as |postNumber|}}
     <a href='{{topic.url}}/{{postNumber}}'>#{{postNumber}}</a>
   {{/each}}

app/assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs

@@ -45,7 +45,7 @@
 <td class="num likes">
   {{#if hasLikes}}
     <a href='{{topic.summaryUrl}}'>
-      {{number topic.like_count}} <i class='fa fa-heart'></i></td>
+      {{number topic.like_count}} {{d-icon "heart"}}</td>
     </a>
   {{/if}}
 {{/if}}
@@ -54,7 +54,7 @@
 <td class="num likes">
   {{#if hasOpLikes}}
     <a href='{{topic.summaryUrl}}'>
-      {{number topic.op_like_count}} <i class='fa fa-heart'></i></td>
+      {{number topic.op_like_count}} {{d-icon "heart"}}</td>
     </a>
   {{/if}}
 {{/if}}

app/assets/javascripts/discourse/templates/mobile/components/mobile-nav.hbs

@@ -1,5 +1,7 @@
 {{#if selectedHtml}}
-  <li><a class='expander' {{action 'toggleExpanded'}}>{{{selectedHtml}}} <i class='fa fa-caret-down'></i></a></li>
+  <li><a class='expander' {{action 'toggleExpanded'}}>{{{selectedHtml}}}
+      {{d-icon "caret-down"}}
+    </a></li>
 {{/if}}
 <ul class='drop {{if expanded 'expanded'}}'>
 {{yield}}

app/assets/javascripts/discourse/templates/mobile/components/navigation-bar.hbs

@@ -1,7 +1,7 @@
 <li>
   <a {{action "toggleDrop"}}>
   {{selectedNavItem.displayName}}
-  <i class='fa fa-caret-down'></i>
+  {{d-icon "caret-down"}}
   </a>
 </li>
 {{#if expanded}}

app/assets/javascripts/discourse/templates/mobile/discovery/topics.hbs

@@ -35,7 +35,9 @@
       <button title="{{i18n 'topics.bulk.dismiss_tooltip'}}" id='dismiss-topics' class='btn dismiss-read' {{action "dismissReadPosts"}}>{{i18n 'topics.bulk.dismiss_button'}}</button>
     {{/if}}
     {{#if showResetNew}}
-      <button id='dismiss-new' class='btn dismiss-read' {{action "resetNew"}}><i class="fa fa-check"></i> {{i18n 'topics.bulk.dismiss_new'}}</button>
+      <button id='dismiss-new' class='btn dismiss-read' {{action "resetNew"}}>
+        {{d-icon "check"}}
+        {{i18n 'topics.bulk.dismiss_new'}}</button>
     {{/if}}
 
     {{#if latest}}

app/assets/javascripts/discourse/templates/mobile/modal/login.hbs

@@ -46,7 +46,7 @@
       <button class='btn btn-large btn-primary'
         disabled={{loginDisabled}}
         {{action "login"}}>
-          <i class="fa fa-unlock"></i>&nbsp;{{loginButtonText}}
+          {{d-icon "unlock"}}&nbsp;{{loginButtonText}}
       </button>
 
       {{#if showSignupLink}}

app/assets/javascripts/discourse/templates/modal/create-account.hbs

@@ -70,7 +70,8 @@
               <td></td>
               <td>
                 <label>{{passwordInstructions}}</label>
-                <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div>
+                <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
+                  {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
               </td>
             </tr>
           {{/if}}

app/assets/javascripts/discourse/templates/modal/dismiss-read.hbs

@@ -5,5 +5,6 @@
 {{/d-modal-body}}
 
 <div class="modal-footer">
-  <button class='btn btn-primary' {{action "dismissReadTopics" dismissTopics}}><i class="fa fa-check"></i> {{i18n 'topics.bulk.dismiss'}}</button>
+  <button class='btn btn-primary' {{action "dismissReadTopics" dismissTopics}}>
+    {{d-icon "check"}} {{i18n 'topics.bulk.dismiss'}}</button>
 </div>

app/assets/javascripts/discourse/templates/modal/flag.hbs

@@ -16,14 +16,14 @@
   <button class='btn btn-primary' {{action "createFlag"}} disabled={{submitDisabled}} title="{{i18n 'flagging.submit_tooltip'}}">{{{submitText}}}</button>
 
   {{#if canSendWarning}}
-    <button class="btn btn-danger" {{action "createFlagAsWarning" }} disabled={{submitDisabled}} title="{{i18n 'flagging.official_warning'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'flagging.official_warning'}}</button>
+  <button class="btn btn-danger" {{action "createFlagAsWarning" }} disabled={{submitDisabled}} title="{{i18n 'flagging.official_warning'}}">{{d-icon "exclamation-triangle"}} {{i18n 'flagging.official_warning'}}</button>
   {{/if}}
 
   {{#if canTakeAction}}
-    <button class='btn btn-danger' {{action "takeAction"}} disabled={{submitDisabled}} title="{{i18n 'flagging.take_action_tooltip'}}"><i class="fa fa-gavel"></i>{{i18n 'flagging.take_action'}}</button>
+  <button class='btn btn-danger' {{action "takeAction"}} disabled={{submitDisabled}} title="{{i18n 'flagging.take_action_tooltip'}}">{{d-icon "gavel"}}{{i18n 'flagging.take_action'}}</button>
   {{/if}}
 
   {{#if canDeleteSpammer}}
-    <button class="btn btn-danger" {{action "deleteSpammer" userDetails}} disabled={{submitDisabled}} title="{{i18n 'flagging.delete_spammer'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'flagging.delete_spammer'}}</button>
+  <button class="btn btn-danger" {{action "deleteSpammer" userDetails}} disabled={{submitDisabled}} title="{{i18n 'flagging.delete_spammer'}}">{{d-icon "exclamation-triangle"}} {{i18n 'flagging.delete_spammer'}}</button>
   {{/if}}
 </div>

app/assets/javascripts/discourse/templates/modal/login.hbs

@@ -27,7 +27,7 @@
             </tr>
             <tr>
               <td></td>
-              <td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div></td>
+              <td><div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">{{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div></td>
               <td></td>
             </tr>
           </table>
@@ -43,7 +43,7 @@
       <button class="btn btn-large btn-primary"
         disabled={{loginDisabled}}
         {{action "login"}}>
-          <i class="fa fa-unlock"></i>&nbsp;{{loginButtonText}}
+          {{d-icon "unlock"}} &nbsp;{{loginButtonText}}
       </button>
 
       {{#if showSignupLink}}

app/assets/javascripts/discourse/templates/navigation/default.hbs

@@ -4,6 +4,7 @@
   {{navigation-bar navItems=navItems filterMode=filterMode}}
 
   {{#if canCreateTopic}}
-    <button id="create-topic" class='btn btn-default' {{action "createTopic"}}><i class='fa fa-plus'></i><span>{{i18n 'topic.create'}}</span></button>
+    <button id="create-topic" class='btn btn-default' {{action "createTopic"}}>
+      {{d-icon "plus"}} <span>{{i18n 'topic.create'}}</span></button>
   {{/if}}
 {{/d-section}}

app/assets/javascripts/discourse/templates/password-reset.hbs

@@ -25,7 +25,8 @@
         </div>
 
         <div class="instructions">
-          <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}"><i class="fa fa-exclamation-triangle"></i> {{i18n 'login.caps_lock_warning'}}</div>
+          <div class="caps-lock-warning {{unless capsLockOn 'invisible'}}">
+            {{d-icon "exclamation-triangle"}} {{i18n 'login.caps_lock_warning'}}</div>
         </div>
 
         <button class='btn btn-primary' {{action "submit"}}>{{i18n 'user.change_password.set_password'}}</button>

app/assets/javascripts/discourse/templates/preferences/account.hbs

@@ -3,7 +3,8 @@
   <div class="controls">
     <span class='static'>{{model.username}}</span>
     {{#if model.can_edit_username}}
-      {{#link-to "preferences.username" class="btn btn-small pad-left no-text"}}<i class="fa fa-pencil"></i>{{/link-to}}
+      {{#link-to "preferences.username" class="btn btn-small pad-left no-text"}}
+      {{d-icon "pencil"}} {{/link-to}}
     {{/if}}
   </div>
   <div class='instructions'>

app/assets/javascripts/discourse/templates/preferences/categories.hbs

@@ -3,7 +3,7 @@
   <label class="control-label">{{i18n 'user.categories_settings'}}</label>
 
   <div class="controls category-controls">
-    <label><span class="icon fa fa-exclamation-circle watching"></span> {{i18n 'user.watched_categories'}}</label>
+    <label>{{d-icon "exclamation-circle" class="icon watching"}} {{i18n 'user.watched_categories'}}</label>
     {{category-selector categories=model.watchedCategories blacklist=selectedCategories}}
   </div>
   <div class="instructions">{{i18n 'user.watched_categories_instructions'}}</div>
@@ -12,7 +12,7 @@
   </div>
 
   <div class="controls category-controls">
-    <label><span class="icon fa fa-circle tracking"></span> {{i18n 'user.tracked_categories'}}</label>
+    <label>{{d-icon "circle" class="icon tracking"}} {{i18n 'user.tracked_categories'}}</label>
     {{category-selector categories=model.trackedCategories blacklist=selectedCategories}}
   </div>
   <div class="instructions">{{i18n 'user.tracked_categories_instructions'}}</div>
@@ -21,13 +21,13 @@
   </div>
 
   <div class="controls category-controls">
-    <label><span class="icon fa fa-dot-circle-o watching-first-post"></span> {{i18n 'user.watched_first_post_categories'}}</label>
+    <label>{{d-icon "dot-circle-o" class="icon watching-first-post"}} {{i18n 'user.watched_first_post_categories'}}</label>
     {{category-selector categories=model.watchedFirstPostCategories}}
   </div>
   <div class="instructions">{{i18n 'user.watched_first_post_categories_instructions'}}</div>
 
   <div class="controls category-controls">
-    <label><span class="icon fa fa-times-circle muted"></span> {{i18n 'user.muted_categories'}}</label>
+    <label>{{d-icon "times-circle" class="icon muted"}} {{i18n 'user.muted_categories'}}</label>
     {{category-selector categories=model.mutedCategories blacklist=selectedCategories}}
   </div>
   <div class="instructions">{{i18n 'user.muted_categories_instructions'}}</div>

app/assets/javascripts/discourse/templates/preferences/notifications.hbs

@@ -29,7 +29,7 @@
 <div class="control-group muting">
   <label class="control-label">{{i18n 'user.users'}}</label>
   <div class="controls category-controls">
-    <label><span class="icon fa fa-times-circle muted"></span> {{i18n 'user.muted_users'}}</label>
+    <label>{{d-icon "times-circle" class="muted icon"}} {{i18n 'user.muted_users'}}</label>
     {{user-selector excludeCurrentUser=true usernames=model.muted_usernames class="user-selector"}}
   </div>
   <div class="instructions">{{i18n 'user.muted_users_instructions'}}</div>

app/assets/javascripts/discourse/templates/preferences/tags.hbs

@@ -4,25 +4,25 @@
   <label class="control-label">{{i18n 'user.tag_settings'}}</label>
 
   <div class="controls tag-controls">
-    <label><span class="icon fa fa-exclamation-circle watching"></span> {{i18n 'user.watched_tags'}}</label>
+    <label>{{d-icon "exclamation-circle" class="icon watching"}} {{i18n 'user.watched_tags'}}</label>
     {{tag-chooser tags=model.watched_tags blacklist=selectedTags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
   </div>
   <div class="instructions">{{i18n 'user.watched_tags_instructions'}}</div>
 
   <div class="controls tag-controls">
-    <label><span class="icon fa fa-circle tracking"></span> {{i18n 'user.tracked_tags'}}</label>
+    <label>{{d-icon "circle" class="icon tracking"}} {{i18n 'user.tracked_tags'}}</label>
     {{tag-chooser tags=model.tracked_tags blacklist=selectedTags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
   </div>
   <div class="instructions">{{i18n 'user.tracked_tags_instructions'}}</div>
 
   <div class="controls tag-controls">
-    <label><span class="icon fa fa-dot-circle-o watching-first-post"></span> {{i18n 'user.watched_first_post_tags'}}</label>
+    <label>{{d-icon "dot-circle-o" class="icon watching-first-post"}} {{i18n 'user.watched_first_post_tags'}}</label>
     {{tag-chooser tags=model.watching_first_post_tags blacklist=selectedTags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
   </div>
   <div class="instructions">{{i18n 'user.watched_first_post_tags_instructions'}}</div>
 
   <div class="controls tag-controls">
-    <label><span class="icon fa fa-times-circle muted"></span> {{i18n 'user.muted_tags'}}</label>
+    <label>{{d-icon "times-circle" class="icon muted"}} {{i18n 'user.muted_tags'}}</label>
     {{tag-chooser tags=model.muted_tags blacklist=selectedTags allowCreate=false placeholder="" everyTag="true" unlimitedTagCount="true"}}
   </div>
   <div class="instructions">{{i18n 'user.muted_tags_instructions'}}</div>

app/assets/javascripts/discourse/templates/tag-groups-show.hbs

@@ -20,6 +20,6 @@
   </section>
 
   <button {{action "save"}} disabled={{model.disableSave}} class='btn'>{{i18n 'tagging.groups.save'}}</button>
-  <button {{action "destroy"}} disabled={{model.disableSave}} class='btn btn-danger'><i class="fa fa-trash-o"></i> {{i18n 'tagging.groups.delete'}}</button>
+  <button {{action "destroy"}} disabled={{model.disableSave}} class='btn btn-danger'>{{d-icon "trash-o"}} {{i18n 'tagging.groups.delete'}}</button>
   <span class="saving {{unless model.savingStatus 'hidden'}}">{{model.savingStatus}}</span>
-</div>
+</div>

app/assets/javascripts/discourse/templates/tag-groups.hbs

@@ -7,10 +7,10 @@
         <li><a {{action "selectTagGroup" tagGroup}} class="{{if tagGroup.selected 'active'}}">{{tagGroup.name}}</a></li>
       {{/each}}
     </ul>
-    <button {{action "newTagGroup"}} class='btn'><i class="fa fa-plus"></i>{{i18n 'tagging.groups.new'}}</button>
+    <button {{action "newTagGroup"}} class='btn'>{{d-icon "plus"}}{{i18n 'tagging.groups.new'}}</button>
   </div>
 
   {{outlet}}
 
   <div class="clearfix" />
-</div>
+</div>

app/assets/javascripts/discourse/templates/tags/show.hbs

@@ -16,7 +16,7 @@
       {{d-button action="renameTag" actionParam=tag icon="pencil" class="admin-tag"}}
     {{else}}
       {{#if canCreateTopic}}
-        <button id="create-topic" class='btn btn-default' {{action "createTopic"}}><i class='fa fa-plus'></i>{{i18n 'topic.create'}}</button>
+      <button id="create-topic" class='btn btn-default' {{action "createTopic"}}>{{d-icon "plus"}}{{i18n 'topic.create'}}</button>
       {{/if}}
     {{/if}}
 

app/assets/javascripts/discourse/templates/topic-list-header-column.raw.hbs

@@ -12,6 +12,6 @@
   {{/if ~}}
   {{view.localizedName}}
   {{~#if view.isSorting}}
-    <i class='{{view.sortClass}}'></i>
+    {{d-icon sortIcon}}
   {{/if ~}}
 </th>

app/assets/javascripts/discourse/templates/topic-status.raw.hbs

@@ -3,9 +3,9 @@
 {{/if ~}}
 {{~#each view.statuses as |status|~}}
 {{~#if status.href ~}}
-<a href='{{status.href}}' title='{{status.title}}' class='topic-status {{status.extraClasses}}'><i class='fa fa-{{status.icon}}'></i></a>
+<a href='{{status.href}}' title='{{status.title}}' class='topic-status {{status.extraClasses}}'>{{d-icon status.icon}}</a>
 {{~else ~}}
-<{{status.openTag}} title='{{status.title}}' class='topic-status'><i class='fa fa-{{status.icon}}'></i></{{status.closeTag}}>
+<{{status.openTag}} title='{{status.title}}' class='topic-status'>{{d-icon status.icon}}</{{status.closeTag}}>
 {{~/if ~}}
 {{~/each}}
 {{~#if view.renderDiv ~}}

app/assets/javascripts/discourse/templates/user-selector-autocomplete.raw.hbs

@@ -13,7 +13,7 @@
       {{#each options.groups as |group|}}
         <li>
           <a href title="{{group.full_name}}">
-            <i class='fa fa-users'></i>
+            {{d-icon "users"}}
             <span class='username'>{{group.name}}</span>
             <span class='name'>{{group.full_name}}</span>
           </a>

app/assets/javascripts/discourse/templates/user/activity.hbs

@@ -8,18 +8,18 @@
     </li>
     <li>
       {{#link-to 'userActivity.replies'}}
-        <i class="glyph fa fa-reply"></i>{{i18n 'user_action_groups.5'}}
+        {{d-icon "reply" class="glyph"}}{{i18n 'user_action_groups.5'}}
       {{/link-to}}
     </li>
     <li>
       {{#link-to 'userActivity.likesGiven'}}
-        <i class="glyph fa fa-heart"></i>{{i18n 'user_action_groups.1'}}
+        {{d-icon "heart" class="glyph"}}{{i18n 'user_action_groups.1'}}
       {{/link-to}}
     </li>
     {{#if showBookmarks}}
     <li>
       {{#link-to 'userActivity.bookmarks'}}
-        <i class="glyph fa fa-bookmark"></i>{{i18n 'user_action_groups.3'}}
+        {{d-icon "bookmark" class="glyph"}}{{i18n 'user_action_groups.3'}}
       {{/link-to}}
     </li>
     {{/if}}

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -26,7 +26,7 @@
     {{#if group.has_messages}}
     <li>
       {{#link-to 'userPrivateMessages.group' group.name}}
-        <i class='glyph fa fa-group'></i>
+        {{d-icon "group" class="glyph"}}
         {{capitalize-string group.name}}
       {{/link-to}}
     </li>
@@ -44,7 +44,7 @@
 
 <div class="clearfix list-actions">
     <button {{action "toggleBulkSelect"}} class="btn bulk-select" title="{{i18n "user.messages.bulk_select"}}">
-      <i class="fa fa-list"></i>
+      {{d-icon "list"}}
     </button>
 
     {{#if site.mobileView}}

app/assets/javascripts/discourse/templates/user/notifications.hbs

@@ -5,17 +5,17 @@
     </li>
     <li>
       {{#link-to 'userNotifications.responses'}}
-        <i class="glyph fa fa-reply"></i>
+        {{d-icon "reply" class="glyph"}}
         {{i18n 'user_action_groups.6'}}
       {{/link-to}}
     </li>
     <li>
       {{#link-to 'userNotifications.likesReceived'}}
-        <i class="glyph fa fa-heart"></i>{{i18n 'user_action_groups.2'}}
+        {{d-icon "heart" class="glyph"}}{{i18n 'user_action_groups.2'}}
       {{/link-to}}
     </li>
-    <li>{{#link-to 'userNotifications.mentions'}}<i class="glyph fa fa-at"></i>{{i18n 'user_action_groups.7'}}{{/link-to}}</li>
+    <li>{{#link-to 'userNotifications.mentions'}}{{d-icon "at" class="glyph"}}{{i18n 'user_action_groups.7'}}{{/link-to}}</li>
-    <li>{{#link-to 'userNotifications.edits'}}<i class="glyph fa fa-pencil"></i>{{i18n 'user_action_groups.11'}}{{/link-to}}</li>
+    <li>{{#link-to 'userNotifications.edits'}}{{d-icon "pencil" class="glyph"}}{{i18n 'user_action_groups.11'}}{{/link-to}}</li>
   {{/mobile-nav}}
 
   {{#if model}}

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

@@ -1,3 +1,4 @@
+import { iconHTML } from 'discourse-common/lib/icon-library';
 import { ajax } from 'discourse/lib/ajax';
 import { isValidLink } from 'discourse/lib/click-track';
 import { number } from 'discourse/lib/formatter';
@@ -140,7 +141,7 @@ export default class PostCooked {
         $blockQuote.showHtml(div, 'fast', finished);
       }).catch((e) => {
         if (e.jqXHR.status === 404) {
-          $blockQuote.showHtml($("<div class='expanded-quote'><i class='fa fa-trash-o'></i></div>"), 'fast', finished);
+          $blockQuote.showHtml($(`<div class='expanded-quote'>${iconHTML('trash-o')}</div>`), 'fast', finished);
         }
       });
     } else {
@@ -178,7 +179,7 @@ export default class PostCooked {
     // Only add the expand/contract control if it's not a full post
     let expandContract = "";
     if (!$aside.data('full')) {
-      expandContract = `<i class='fa fa-${desc}' title='${I18n.t("post.expand_collapse")}'></i>`;
+      expandContract = iconHTML(desc, { title: "post.expand_collapse" });
       $('.title', $aside).css('cursor', 'pointer');
     }
     $('.quote-controls', $aside).html(expandContract + navLink);

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

@@ -360,7 +360,7 @@ export default createWidget('post-menu', {
       return this.sendWidgetAction('toggleLike');
     }
 
-    const $heart = $(`[data-post-id=${attrs.id}] .fa-heart`);
+    const $heart = $(`[data-post-id=${attrs.id}] .d-icon-heart`);
     $heart.closest('button').addClass('has-like');
 
     if (!Ember.testing) {

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

@@ -88,7 +88,7 @@ createWidget('post-avatar', {
   html(attrs) {
     let body;
     if (!attrs.user_id) {
-      body = h('i', { className: 'fa fa-trash-o deleted-user-avatar' });
+      body = iconNode('trash-o', { class: 'deleted-user-avatar' });
     } else {
       body = avatarFor.call(this, this.settings.size, {
         template: attrs.avatar_template,

app/assets/javascripts/discourse/widgets/topic-notifications-button.js.es6

@@ -2,6 +2,7 @@ import { createWidget } from 'discourse/widgets/widget';
 import { topicLevels, buttonDetails } from 'discourse/lib/notification-levels';
 import { h } from 'virtual-dom';
 import RawHTML from 'discourse/widgets/raw-html';
+import { iconNode } from 'discourse-common/lib/icon-library';
 
 createWidget('notification-option', {
   buildKey: attrs => `topic-notifications-button-${attrs.id}`,
@@ -9,7 +10,7 @@ createWidget('notification-option', {
 
   html(attrs) {
     return h('a', [
-        h('span.icon', { className: `fa fa-${attrs.icon} ${attrs.key}`}),
+        iconNode(attrs.icon, { class: attrs.key }),
         h('div', [
           h('span.title', I18n.t(`topic.notifications.${attrs.key}.title`)),
           h('span.desc', I18n.t(`topic.notifications.${attrs.key}.description`)),

plugins/discourse-details/test/javascripts/acceptance/details-button-test.js.es6

@@ -11,7 +11,7 @@ test('details button', (assert) => {
 
   click('#create-topic');
   click('button.options');
-  click('.popup-menu .fa-caret-right');
+  click('.popup-menu .d-icon-caret-right');
 
   andThen(() => {
     assert.equal(
@@ -30,7 +30,7 @@ test('details button', (assert) => {
   });
 
   click('button.options');
-  click('.popup-menu .fa-caret-right');
+  click('.popup-menu .d-icon-caret-right');
 
   andThen(() => {
     assert.equal(
@@ -53,7 +53,7 @@ test('details button', (assert) => {
   });
 
   click('button.options');
-  click('.popup-menu .fa-caret-right');
+  click('.popup-menu .d-icon-caret-right');
 
   andThen(() => {
     assert.equal(
@@ -76,7 +76,7 @@ test('details button', (assert) => {
   });
 
   click('button.options');
-  click('.popup-menu .fa-caret-right');
+  click('.popup-menu .d-icon-caret-right');
 
   andThen(() => {
     assert.equal(

plugins/poll/test/javascripts/widgets/discourse-poll-option-test.js.es6

@@ -14,7 +14,7 @@ widgetTest('single, not selected', {
   },
 
   test(assert) {
-    assert.ok(find('li .fa-circle-o:eq(0)').length === 1);
+    assert.ok(find('li .d-icon-circle-o:eq(0)').length === 1);
   }
 });
 
@@ -27,7 +27,7 @@ widgetTest('single, selected', {
   },
 
   test(assert) {
-    assert.ok(find('li .fa-dot-circle-o:eq(0)').length === 1);
+    assert.ok(find('li .d-icon-dot-circle-o:eq(0)').length === 1);
   }
 });
 
@@ -43,7 +43,7 @@ widgetTest('multi, not selected', {
   },
 
   test(assert) {
-    assert.ok(find('li .fa-square-o:eq(0)').length === 1);
+    assert.ok(find('li .d-icon-square-o:eq(0)').length === 1);
   }
 });
 
@@ -59,6 +59,6 @@ widgetTest('multi, selected', {
   },
 
   test(assert) {
-    assert.ok(find('li .fa-check-square-o:eq(0)').length === 1);
+    assert.ok(find('li .d-icon-check-square-o:eq(0)').length === 1);
   }
 });

test/javascripts/acceptance/composer-test.js.es6

@@ -264,7 +264,7 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => {
 
   click('.topic-post:eq(0) button.reply');
   click('button.options');
-  click('.popup-menu .fa-eye-slash');
+  click('.popup-menu .d-icon-eye-slash');
   andThen(() => {
     assert.ok(
       find('.composer-fields .whisper').text().indexOf(I18n.t("composer.whisper")) > 0,
@@ -286,7 +286,7 @@ QUnit.test("Composer can toggle between reply and createTopic", assert => {
   });
 
   click('button.options');
-  click('.popup-menu .fa-eye-slash');
+  click('.popup-menu .d-icon-eye-slash');
   andThen(() => {
     assert.ok(
       find('.composer-fields .whisper').text().indexOf(I18n.t("composer.unlist")) > 0,
@@ -334,4 +334,4 @@ QUnit.test("Composer draft with dirty reply can toggle to edit", assert => {
   andThen(() => {
     assert.equal(find('.d-editor-input').val().indexOf('This is the first post.'), 0, 'it populates the input with the post text');
   });
-});
+});

test/javascripts/acceptance/topic-test.js.es6

@@ -33,7 +33,7 @@ QUnit.test("Share Popup", assert => {
 QUnit.test("Showing and hiding the edit controls", assert => {
   visit("/t/internationalization-localization/280");
 
-  click('#topic-title .fa-pencil');
+  click('#topic-title .d-icon-pencil');
 
   andThen(() => {
     assert.ok(exists('#edit-title'), 'it shows the editing controls');
@@ -48,7 +48,7 @@ QUnit.test("Showing and hiding the edit controls", assert => {
 
 QUnit.test("Updating the topic title and category", assert => {
   visit("/t/internationalization-localization/280");
-  click('#topic-title .fa-pencil');
+  click('#topic-title .d-icon-pencil');
 
   fillIn('#edit-title', 'this is the new title');
   selectDropdown('.category-combobox', 4);
@@ -140,7 +140,7 @@ QUnit.test("Reply as new message", assert => {
 
 QUnit.test("Updating the topic title with emojis", assert => {
   visit("/t/internationalization-localization/280");
-  click('#topic-title .fa-pencil');
+  click('#topic-title .d-icon-pencil');
 
   fillIn('#edit-title', 'emojis title :bike: :blonde_woman:t6:');
 
@@ -149,4 +149,4 @@ QUnit.test("Updating the topic title with emojis", assert => {
   andThen(() => {
     assert.equal(find('.fancy-title').html().trim(), 'emojis title <img src=\"/images/emoji/emoji_one/bike.png?v=5\" title=\"bike\" alt=\"bike\" class=\"emoji\"> <img src=\"/images/emoji/emoji_one/blonde_woman/6.png?v=5\" title=\"blonde_woman:t6\" alt=\"blonde_woman:t6\" class=\"emoji\">', 'it displays the new title with emojis');
   });
-});
+});

test/javascripts/widgets/actions-summary-test.js.es6

@@ -74,7 +74,7 @@ widgetTest('post deleted', {
     });
   },
   test(assert) {
-    assert.ok(this.$('.post-action .fa-trash-o').length === 1, 'it has the deleted icon');
+    assert.ok(this.$('.post-action .d-icon-trash-o').length === 1, 'it has the deleted icon');
     assert.ok(this.$('.avatar[title=eviltrout]').length === 1, 'it has the deleted by avatar');
   }
 });

test/javascripts/widgets/home-logo-test.js.es6

@@ -66,7 +66,7 @@ widgetTest('no logo - minimized', {
   },
 
   test(assert) {
-    assert.ok(this.$('i.fa-home').length === 1);
+    assert.ok(this.$('.d-icon-home').length === 1);
   }
 });
 

test/javascripts/widgets/post-test.js.es6

@@ -436,7 +436,7 @@ widgetTest("reply directly above", {
     click('a.reply-to-tab');
     andThen(() => {
       assert.equal(this.$('section.embedded-posts.top .cooked').length, 1);
-      assert.equal(this.$('section.embedded-posts i.fa-arrow-up').length, 1);
+      assert.equal(this.$('section.embedded-posts .d-icon-arrow-up').length, 1);
     });
   }
 });
@@ -673,7 +673,7 @@ widgetTest("replies - one below, not suppressed", {
     click('button.show-replies');
     andThen(() => {
       assert.equal(this.$('section.embedded-posts.bottom .cooked').length, 1);
-      assert.equal(this.$('section.embedded-posts i.fa-arrow-down').length, 1);
+      assert.equal(this.$('section.embedded-posts .d-icon-arrow-down').length, 1);
     });
   }
 });
@@ -760,7 +760,7 @@ widgetTest("topic map - links", {
     click('nav.buttons button');
     andThen(() => {
       assert.equal(this.$('.map.map-collapsed').length, 0);
-      assert.equal(this.$('.topic-map i.fa-chevron-up').length, 1);
+      assert.equal(this.$('.topic-map .d-icon-chevron-up').length, 1);
       assert.equal(this.$('.topic-map-expanded').length, 1);
       assert.equal(this.$('.topic-map-expanded .topic-link').length, 5, 'it limits the links displayed');
     });

test/javascripts/widgets/poster-name-test.js.es6

@@ -38,7 +38,7 @@ widgetTest('extra classes and glyphs', {
     assert.ok(this.$('span.staff').length);
     assert.ok(this.$('span.admin').length);
     assert.ok(this.$('span.moderator').length);
-    assert.ok(this.$('i.fa-shield').length);
+    assert.ok(this.$('.d-icon-shield').length);
     assert.ok(this.$('span.new-user').length);
     assert.ok(this.$('span.fish').length);
   }