diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html
index 2f42ca7e671..4bb0e8ac5a9 100644
--- a/public/app/features/styleguide/styleguide.html
+++ b/public/app/features/styleguide/styleguide.html
@@ -43,6 +43,12 @@
+
+
forms
diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts
index c297f12ab4c..dc5c5d94072 100644
--- a/public/app/features/styleguide/styleguide.ts
+++ b/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);
diff --git a/public/sass/icons.json b/public/sass/icons.json
new file mode 100644
index 00000000000..593c7bbfb55
--- /dev/null
+++ b/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"
+]
\ No newline at end of file
diff --git a/public/sass/pages/_styleguide.scss b/public/sass/pages/_styleguide.scss
index 55aabb01f01..70a71cda1be 100644
--- a/public/sass/pages/_styleguide.scss
+++ b/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) {