diff --git a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6 b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
index bc8abf3c352..fcf3ce404e6 100644
--- a/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
+++ b/app/assets/javascripts/discourse-common/lib/icon-library.js.es6
@@ -6,7 +6,9 @@ const REPLACEMENTS = {
   'd-muted': 'times-circle',
   'd-regular': 'circle-o',
   'd-watching': 'exclamation-circle',
-  'd-watching-first': 'dot-circle-o'
+  'd-watching-first': 'dot-circle-o',
+  'd-drop-expanded': 'caret-down',
+  'd-drop-collapsed': 'caret-right',
 };
 
 export function renderIcon(renderType, id, params) {
diff --git a/app/assets/javascripts/discourse/components/category-drop.js.es6 b/app/assets/javascripts/discourse/components/category-drop.js.es6
index 7a79c6b915a..379e326ac84 100644
--- a/app/assets/javascripts/discourse/components/category-drop.js.es6
+++ b/app/assets/javascripts/discourse/components/category-drop.js.es6
@@ -12,7 +12,7 @@ export default Ember.Component.extend({
 
   @computed('expanded')
   expandIcon(expanded) {
-    return expanded ? 'caret-down' : 'caret-right';
+    return expanded ? 'd-drop-expanded' : 'd-drop-collapsed';
   },
 
   allCategoriesUrl: function() {
diff --git a/app/assets/javascripts/discourse/components/tag-drop.js.es6 b/app/assets/javascripts/discourse/components/tag-drop.js.es6
index 698106c061e..201d9a134d5 100644
--- a/app/assets/javascripts/discourse/components/tag-drop.js.es6
+++ b/app/assets/javascripts/discourse/components/tag-drop.js.es6
@@ -22,7 +22,7 @@ export default Ember.Component.extend({
 
   @computed('expanded')
   expandedIcon(expanded) {
-    return expanded ? 'caret-down' : 'caret-right';
+    return expanded ? 'd-drop-expanded' : 'd-drop-collapsed';
   },
 
   @computed('tagId')