Show group icon in category badges if the category has restricted access

app/assets/javascripts/discourse/lib/html.js

@@ -47,7 +47,10 @@ Discourse.HTML = {
 
     var name = Em.get(category, 'name'),
         description = Em.get(category, 'description'),
-        html = "<a href=\"" + Discourse.getURL("/category/") + Discourse.Category.slugFor(category) + "\" class=\"badge-category\" ";
+        restricted = Em.get(category, 'read_restricted'),
+        html = "<a href=\"" + Discourse.getURL("/category/") + Discourse.Category.slugFor(category) + "\" ";
+
+    html += "class=\"badge-category" + (restricted ? ' restricted' : '' ) + "\" ";
 
     // Add description if we have it
     if (description) html += "title=\"" + Handlebars.Utils.escapeExpression(description) + "\" ";
@@ -56,7 +59,12 @@ Discourse.HTML = {
     if (categoryStyle) {
       html += "style=\"" + categoryStyle + "\" ";
     }
-    html += ">" + name + "</a>";
+
+    if (restricted) {
+      html += "><div><i class='fa fa-group'></i> " + name + "</div></a>";
+    } else {
+      html += ">" + name + "</a>";
+    }
 
     return html;
   }

app/assets/javascripts/discourse/templates/components/category-drop.js.handlebars

@@ -1,5 +1,10 @@
 {{#if category}}
-  <a href="#" {{action expand}} class="badge-category" {{bind-attr style="badgeStyle"}}>{{category.name}}</a>
+  <a href="#" {{action expand}} class="badge-category" {{bind-attr style="badgeStyle"}}>
+    {{#if category.read_restricted}}
+      <i class='fa fa-group'></i>
+    {{/if}}
+    {{category.name}}
+  </a>
 {{else}}
   {{#if noSubcategories}}
     <a href='#' {{action expand}} class='badge-category home' {{bind-attr style="badgeStyle"}}>{{i18n categories.no_subcategory}}</i></a>

app/assets/stylesheets/common/components/badges.css.scss

@@ -28,6 +28,13 @@
   &[href] {
     color: $white;
   }
+  &.restricted {
+    div {
+      display: inline-block;
+      vertical-align: top;
+      margin: 0;
+    }
+  }
 }