add icon guide

public/app/features/styleguide/styleguide.html

@@ -43,6 +43,12 @@
 		</div>
 	</div>
 
+	<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
+		<div ng-repeat="icon in ctrl.icons" class="col-lg-1 col-md-2 col-sm-2 col-xs-4">
+			<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
+		</div>
+	</div>
+
 	<div class="tab-pane" ng-if="ctrl.page.forms">
 		forms
 	</div>

public/app/features/styleguide/styleguide.ts

@@ -9,8 +9,9 @@ class StyleGuideCtrl {
   buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
   buttonSizes = ['btn-small', '', 'btn-large'];
   buttonVariants = ['-', '-outline-'];
+  icons: any = [];
   page: any;
-  pages = ['colors', 'buttons'];
+  pages = ['colors', 'buttons', 'icons'];
 
   /** @ngInject **/
   constructor(private $http, private $routeParams, private $location) {
@@ -26,6 +27,10 @@ class StyleGuideCtrl {
     if (this.page.colors) {
       this.loadColors();
     }
+
+    if (this.page.icons) {
+      this.loadIcons();
+    }
    }
 
   loadColors() {
@@ -36,6 +41,12 @@ class StyleGuideCtrl {
     });
   }
 
+  loadIcons() {
+   this.$http.get('public/sass/icons.json').then(res => {
+      this.icons = res.data;
+    });
+  }
+
   switchTheme() {
     this.$routeParams.theme = this.theme === 'dark' ? 'light' : 'dark';
     this.$location.search(this.$routeParams);

public/sass/icons.json

@@ -0,0 +1,52 @@
+[
+      "raintank_wordmark",
+      "raintank_r-icn",
+      "check-alt",
+      "check",
+      "collector",
+      "dashboard",
+      "panel",
+      "datasources",
+      "endpoint-tiny",
+      "endpoint",
+      "page",
+      "filter",
+      "status",
+      "monitoring",
+      "monitoring-tiny",
+      "jump-to-dashboard",
+      "warning",
+      "nodata",
+      "critical",
+      "crit",
+      "online",
+      "event-error",
+      "event",
+      "sadface",
+      "private-collector",
+      "alert-disabled",
+      "refresh",
+      "save",
+      "share",
+      "star",
+      "search",
+      "remove",
+      "video",
+      "bulk_action",
+      "grabber",
+      "users",
+      "globe",
+      "snapshot",
+      "play-grafana-icon",
+      "grafana-icon",
+      "email",
+      "stopwatch",
+      "skull",
+      "probe",
+      "apps",
+      "scale",
+      "pending",
+      "verified",
+      "worldping",
+      "grafana_wordmark"
+]

public/sass/pages/_styleguide.scss

@@ -21,6 +21,11 @@
   }
 }
 
+.style-guide-icon-list {
+  font-size: 2em;
+  text-align: center;
+}
+
 // define("areas/styleguide/static/script/app/colors", [], function() {
 //    "use strict";
 //    var a = function(a) {