From 899a4f0700a012b740a16962a1b62660d3eba6e7 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Wed, 13 Nov 2019 13:33:29 +0100
Subject: [PATCH] grafana/ui: Add Icon component (#20353)

* Add Icon component

* Add missing Icon types

* Polish icon story

* Update packages/grafana-ui/src/components/Icon/Icon.mdx

(cherry picked from commit 17fe704ae8151e28fd2db93bb530acb3c9dcf9d0)
---
 .../grafana-ui/src/components/Icon/Icon.mdx   |   28 +
 .../src/components/Icon/Icon.story.tsx        |  103 ++
 .../grafana-ui/src/components/Icon/Icon.tsx   |   31 +
 .../grafana-ui/src/components/Icon/types.ts   | 1304 +++++++++++++++++
 4 files changed, 1466 insertions(+)
 create mode 100644 packages/grafana-ui/src/components/Icon/Icon.mdx
 create mode 100644 packages/grafana-ui/src/components/Icon/Icon.story.tsx
 create mode 100644 packages/grafana-ui/src/components/Icon/Icon.tsx
 create mode 100644 packages/grafana-ui/src/components/Icon/types.ts

diff --git a/packages/grafana-ui/src/components/Icon/Icon.mdx b/packages/grafana-ui/src/components/Icon/Icon.mdx
new file mode 100644
index 00000000000..53b94a65217
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/Icon.mdx
@@ -0,0 +1,28 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Icon } from './Icon';
+
+<Meta title="MDX|Icon" component={Icon} />
+
+# Icon
+
+Grafana's wrapper component over [Font Awesome](https://fontawesome.com/) icons
+
+
+### Changing icon size
+
+By default `Icon` has width and height of `16px` and font-size of `14px`. Pass `className` to control icon's size:
+
+```jsx
+import { css } from 'emotion';
+
+const customIconSize = css`
+  width: 20px;
+  height: 20px;
+  font-size: 18px;
+`;
+
+<Icon name="check" className={customIconSize} />
+```
+
+
+<Props of={Icon} />
diff --git a/packages/grafana-ui/src/components/Icon/Icon.story.tsx b/packages/grafana-ui/src/components/Icon/Icon.story.tsx
new file mode 100644
index 00000000000..7ba83ac0fa2
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/Icon.story.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { css } from 'emotion';
+
+import { Icon } from './Icon';
+import { getAvailableIcons, IconType } from './types';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { useTheme, selectThemeVariant } from '../../themes';
+import mdx from './Icon.mdx';
+
+export default {
+  title: 'UI/Icon',
+  component: Icon,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+const IconWrapper: React.FC<{ name: IconType }> = ({ name }) => {
+  const theme = useTheme();
+  const borderColor = selectThemeVariant(
+    {
+      light: theme.colors.gray5,
+      dark: theme.colors.dark6,
+    },
+    theme.type
+  );
+
+  return (
+    <div
+      className={css`
+        width: 150px;
+        height: 60px;
+        display: table-cell;
+        padding: 12px;
+        border: 1px solid ${borderColor};
+        text-align: center;
+
+        &:hover {
+          background: ${borderColor};
+        }
+      `}
+    >
+      <Icon
+        name={name}
+        className={css`
+          font-size: 18px;
+        `}
+      />
+      <div
+        className={css`
+          padding-top: 16px;
+          word-break: break-all;
+          font-family: ${theme.typography.fontFamily.monospace};
+          font-size: ${theme.typography.size.xs};
+        `}
+      >
+        {name}
+      </div>
+    </div>
+  );
+};
+
+export const simple = () => {
+  const icons = getAvailableIcons();
+  const iconsPerRow = 10;
+  const rows: IconType[][] = [[]];
+  let rowIdx = 0;
+
+  icons.forEach((i: IconType, idx: number) => {
+    if (idx % iconsPerRow === 0) {
+      rows.push([]);
+      rowIdx++;
+    }
+    rows[rowIdx].push(i);
+  });
+
+  return (
+    <div
+      className={css`
+        display: table;
+        table-layout: fixed;
+        border-collapse: collapse;
+      `}
+    >
+      {rows.map(r => {
+        return (
+          <div
+            className={css`
+              display: table-row;
+            `}
+          >
+            {r.map((i, index) => {
+              return <IconWrapper name={i} />;
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/Icon/Icon.tsx b/packages/grafana-ui/src/components/Icon/Icon.tsx
new file mode 100644
index 00000000000..ebe53ddc332
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/Icon.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { cx, css } from 'emotion';
+import { stylesFactory } from '../../themes';
+import { IconType } from './types';
+
+export interface IconProps {
+  name: IconType;
+  className?: string;
+}
+
+const getIconStyles = stylesFactory(() => {
+  return {
+    icon: css`
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      text-align: center;
+      font-size: 14px;
+      &:before {
+        vertical-align: middle;
+      }
+    `,
+  };
+});
+
+export const Icon: React.FC<IconProps> = ({ name, className }) => {
+  const styles = getIconStyles();
+  return <i className={cx(styles.icon, 'fa', `fa-${name}`, className)} />;
+};
+
+Icon.displayName = 'Icon';
diff --git a/packages/grafana-ui/src/components/Icon/types.ts b/packages/grafana-ui/src/components/Icon/types.ts
new file mode 100644
index 00000000000..2f875a56d6b
--- /dev/null
+++ b/packages/grafana-ui/src/components/Icon/types.ts
@@ -0,0 +1,1304 @@
+export type IconType =
+  | 'glass'
+  | 'music'
+  | 'search'
+  | 'envelope-o'
+  | 'heart'
+  | 'star'
+  | 'star-o'
+  | 'user'
+  | 'film'
+  | 'th-large'
+  | 'th'
+  | 'th-list'
+  | 'check'
+  | 'times'
+  | 'search-plus'
+  | 'search-minus'
+  | 'power-off'
+  | 'signal'
+  | 'cog'
+  | 'trash-o'
+  | 'home'
+  | 'file-o'
+  | 'clock-o'
+  | 'road'
+  | 'download'
+  | 'arrow-circle-o-down'
+  | 'arrow-circle-o-up'
+  | 'inbox'
+  | 'play-circle-o'
+  | 'repeat'
+  | 'refresh'
+  | 'list-alt'
+  | 'lock'
+  | 'flag'
+  | 'headphones'
+  | 'volume-off'
+  | 'volume-down'
+  | 'volume-up'
+  | 'qrcode'
+  | 'barcode'
+  | 'tag'
+  | 'tags'
+  | 'book'
+  | 'bookmark'
+  | 'print'
+  | 'camera'
+  | 'font'
+  | 'bold'
+  | 'italic'
+  | 'text-height'
+  | 'text-width'
+  | 'align-left'
+  | 'align-center'
+  | 'align-right'
+  | 'align-justify'
+  | 'list'
+  | 'outdent'
+  | 'indent'
+  | 'video-camera'
+  | 'picture-o'
+  | 'pencil'
+  | 'map-marker'
+  | 'adjust'
+  | 'tint'
+  | 'pencil-square-o'
+  | 'share-square-o'
+  | 'check-square-o'
+  | 'arrows'
+  | 'step-backward'
+  | 'fast-backward'
+  | 'backward'
+  | 'play'
+  | 'pause'
+  | 'stop'
+  | 'forward'
+  | 'fast-forward'
+  | 'step-forward'
+  | 'eject'
+  | 'chevron-left'
+  | 'chevron-right'
+  | 'plus-circle'
+  | 'minus-circle'
+  | 'times-circle'
+  | 'check-circle'
+  | 'question-circle'
+  | 'info-circle'
+  | 'crosshairs'
+  | 'times-circle-o'
+  | 'check-circle-o'
+  | 'ban'
+  | 'arrow-left'
+  | 'arrow-right'
+  | 'arrow-up'
+  | 'arrow-down'
+  | 'share'
+  | 'expand'
+  | 'compress'
+  | 'plus'
+  | 'minus'
+  | 'asterisk'
+  | 'exclamation-circle'
+  | 'gift'
+  | 'leaf'
+  | 'fire'
+  | 'eye'
+  | 'eye-slash'
+  | 'exclamation-triangle'
+  | 'plane'
+  | 'calendar'
+  | 'random'
+  | 'comment'
+  | 'magnet'
+  | 'chevron-up'
+  | 'chevron-down'
+  | 'retweet'
+  | 'shopping-cart'
+  | 'folder'
+  | 'folder-open'
+  | 'arrows-v'
+  | 'arrows-h'
+  | 'bar-chart'
+  | 'camera-retro'
+  | 'key'
+  | 'cogs'
+  | 'comments'
+  | 'thumbs-o-up'
+  | 'thumbs-o-down'
+  | 'star-half'
+  | 'heart-o'
+  | 'sign-out'
+  | 'linkedin-square'
+  | 'thumb-tack'
+  | 'external-link'
+  | 'sign-in'
+  | 'trophy'
+  | 'github-square'
+  | 'upload'
+  | 'lemon-o'
+  | 'phone'
+  | 'square-o'
+  | 'bookmark-o'
+  | 'phone-square'
+  | 'github'
+  | 'unlock'
+  | 'credit-card'
+  | 'rss'
+  | 'hdd-o'
+  | 'bullhorn'
+  | 'bell'
+  | 'certificate'
+  | 'hand-o-right'
+  | 'hand-o-left'
+  | 'hand-o-up'
+  | 'hand-o-down'
+  | 'arrow-circle-left'
+  | 'arrow-circle-right'
+  | 'arrow-circle-up'
+  | 'arrow-circle-down'
+  | 'globe'
+  | 'wrench'
+  | 'tasks'
+  | 'filter'
+  | 'briefcase'
+  | 'arrows-alt'
+  | 'users'
+  | 'link'
+  | 'cloud'
+  | 'flask'
+  | 'scissors'
+  | 'files-o'
+  | 'paperclip'
+  | 'floppy-o'
+  | 'square'
+  | 'bars'
+  | 'list-ul'
+  | 'list-ol'
+  | 'strikethrough'
+  | 'underline'
+  | 'table'
+  | 'magic'
+  | 'truck'
+  | 'pinterest'
+  | 'pinterest-square'
+  | 'google-plus-square'
+  | 'google-plus'
+  | 'money'
+  | 'caret-down'
+  | 'caret-up'
+  | 'caret-left'
+  | 'caret-right'
+  | 'columns'
+  | 'sort'
+  | 'sort-desc'
+  | 'sort-asc'
+  | 'envelope'
+  | 'linkedin'
+  | 'undo'
+  | 'gavel'
+  | 'tachometer'
+  | 'comment-o'
+  | 'comments-o'
+  | 'bolt'
+  | 'sitemap'
+  | 'umbrella'
+  | 'clipboard'
+  | 'lightbulb-o'
+  | 'exchange'
+  | 'cloud-download'
+  | 'cloud-upload'
+  | 'user-md'
+  | 'stethoscope'
+  | 'suitcase'
+  | 'bell-o'
+  | 'coffee'
+  | 'cutlery'
+  | 'file-text-o'
+  | 'building-o'
+  | 'hospital-o'
+  | 'ambulance'
+  | 'medkit'
+  | 'fighter-jet'
+  | 'beer'
+  | 'h-square'
+  | 'plus-square'
+  | 'angle-double-left'
+  | 'angle-double-right'
+  | 'angle-double-up'
+  | 'angle-double-down'
+  | 'angle-left'
+  | 'angle-right'
+  | 'angle-up'
+  | 'angle-down'
+  | 'desktop'
+  | 'laptop'
+  | 'tablet'
+  | 'mobile'
+  | 'circle-o'
+  | 'quote-left'
+  | 'quote-right'
+  | 'spinner'
+  | 'circle'
+  | 'reply'
+  | 'github-alt'
+  | 'folder-o'
+  | 'folder-open-o'
+  | 'smile-o'
+  | 'frown-o'
+  | 'meh-o'
+  | 'gamepad'
+  | 'keyboard-o'
+  | 'flag-o'
+  | 'flag-checkered'
+  | 'terminal'
+  | 'code'
+  | 'reply-all'
+  | 'star-half-o'
+  | 'location-arrow'
+  | 'crop'
+  | 'code-fork'
+  | 'chain-broken'
+  | 'question'
+  | 'info'
+  | 'exclamation'
+  | 'superscript'
+  | 'subscript'
+  | 'eraser'
+  | 'puzzle-piece'
+  | 'microphone'
+  | 'microphone-slash'
+  | 'shield'
+  | 'calendar-o'
+  | 'fire-extinguisher'
+  | 'rocket'
+  | 'maxcdn'
+  | 'chevron-circle-left'
+  | 'chevron-circle-right'
+  | 'chevron-circle-up'
+  | 'chevron-circle-down'
+  | 'html5'
+  | 'css3'
+  | 'anchor'
+  | 'unlock-alt'
+  | 'bullseye'
+  | 'ellipsis-h'
+  | 'ellipsis-v'
+  | 'rss-square'
+  | 'play-circle'
+  | 'ticket'
+  | 'minus-square'
+  | 'minus-square-o'
+  | 'level-up'
+  | 'level-down'
+  | 'check-square'
+  | 'pencil-square'
+  | 'external-link-square'
+  | 'share-square'
+  | 'compass'
+  | 'caret-square-o-down'
+  | 'caret-square-o-up'
+  | 'caret-square-o-right'
+  | 'eur'
+  | 'gbp'
+  | 'usd'
+  | 'inr'
+  | 'jpy'
+  | 'rub'
+  | 'krw'
+  | 'btc'
+  | 'file'
+  | 'file-text'
+  | 'sort-alpha-asc'
+  | 'sort-alpha-desc'
+  | 'sort-amount-asc'
+  | 'sort-amount-desc'
+  | 'sort-numeric-asc'
+  | 'sort-numeric-desc'
+  | 'thumbs-up'
+  | 'thumbs-down'
+  | 'youtube-square'
+  | 'youtube'
+  | 'xing'
+  | 'xing-square'
+  | 'youtube-play'
+  | 'dropbox'
+  | 'stack-overflow'
+  | 'instagram'
+  | 'flickr'
+  | 'adn'
+  | 'bitbucket'
+  | 'bitbucket-square'
+  | 'tumblr'
+  | 'tumblr-square'
+  | 'long-arrow-down'
+  | 'long-arrow-up'
+  | 'long-arrow-left'
+  | 'long-arrow-right'
+  | 'apple'
+  | 'windows'
+  | 'android'
+  | 'linux'
+  | 'dribbble'
+  | 'skype'
+  | 'foursquare'
+  | 'trello'
+  | 'female'
+  | 'male'
+  | 'gratipay'
+  | 'sun-o'
+  | 'moon-o'
+  | 'archive'
+  | 'bug'
+  | 'vk'
+  | 'weibo'
+  | 'renren'
+  | 'pagelines'
+  | 'stack-exchange'
+  | 'arrow-circle-o-right'
+  | 'arrow-circle-o-left'
+  | 'caret-square-o-left'
+  | 'dot-circle-o'
+  | 'wheelchair'
+  | 'vimeo-square'
+  | 'try'
+  | 'plus-square-o'
+  | 'space-shuttle'
+  | 'slack'
+  | 'envelope-square'
+  | 'wordpress'
+  | 'openid'
+  | 'university'
+  | 'graduation-cap'
+  | 'yahoo'
+  | 'google'
+  | 'reddit'
+  | 'reddit-square'
+  | 'stumbleupon-circle'
+  | 'stumbleupon'
+  | 'delicious'
+  | 'digg'
+  | 'pied-piper-pp'
+  | 'pied-piper-alt'
+  | 'drupal'
+  | 'joomla'
+  | 'language'
+  | 'fax'
+  | 'building'
+  | 'child'
+  | 'paw'
+  | 'spoon'
+  | 'cube'
+  | 'cubes'
+  | 'behance'
+  | 'behance-square'
+  | 'steam'
+  | 'steam-square'
+  | 'recycle'
+  | 'car'
+  | 'taxi'
+  | 'tree'
+  | 'database'
+  | 'file-pdf-o'
+  | 'file-word-o'
+  | 'file-excel-o'
+  | 'file-powerpoint-o'
+  | 'file-image-o'
+  | 'file-archive-o'
+  | 'file-audio-o'
+  | 'file-video-o'
+  | 'file-code-o'
+  | 'life-ring'
+  | 'circle-o-notch'
+  | 'rebel'
+  | 'empire'
+  | 'git-square'
+  | 'git'
+  | 'qq'
+  | 'paper-plane'
+  | 'paper-plane-o'
+  | 'history'
+  | 'circle-thin'
+  | 'header'
+  | 'paragraph'
+  | 'sliders'
+  | 'share-alt'
+  | 'share-alt-square'
+  | 'bomb'
+  | 'futbol-o'
+  | 'tty'
+  | 'binoculars'
+  | 'plug'
+  | 'newspaper-o'
+  | 'wifi'
+  | 'calculator'
+  | 'cc-visa'
+  | 'cc-mastercard'
+  | 'cc-discover'
+  | 'cc-amex'
+  | 'cc-paypal'
+  | 'cc-stripe'
+  | 'bell-slash'
+  | 'bell-slash-o'
+  | 'trash'
+  | 'copyright'
+  | 'at'
+  | 'eyedropper'
+  | 'paint-brush'
+  | 'birthday-cake'
+  | 'area-chart'
+  | 'pie-chart'
+  | 'line-chart'
+  | 'lastfm'
+  | 'lastfm-square'
+  | 'toggle-off'
+  | 'toggle-on'
+  | 'bicycle'
+  | 'bus'
+  | 'ioxhost'
+  | 'angellist'
+  | 'cc'
+  | 'ils'
+  | 'meanpath'
+  | 'buysellads'
+  | 'connectdevelop'
+  | 'dashcube'
+  | 'forumbee'
+  | 'leanpub'
+  | 'sellsy'
+  | 'shirtsinbulk'
+  | 'simplybuilt'
+  | 'skyatlas'
+  | 'cart-plus'
+  | 'cart-arrow-down'
+  | 'diamond'
+  | 'ship'
+  | 'user-secret'
+  | 'motorcycle'
+  | 'street-view'
+  | 'heartbeat'
+  | 'venus'
+  | 'mars'
+  | 'mercury'
+  | 'transgender'
+  | 'transgender-alt'
+  | 'venus-double'
+  | 'mars-double'
+  | 'venus-mars'
+  | 'mars-stroke'
+  | 'mars-stroke-v'
+  | 'mars-stroke-h'
+  | 'neuter'
+  | 'genderless'
+  | 'facebook-official'
+  | 'pinterest-p'
+  | 'whatsapp'
+  | 'server'
+  | 'user-plus'
+  | 'user-times'
+  | 'bed'
+  | 'viacoin'
+  | 'train'
+  | 'subway'
+  | 'medium'
+  | 'y-combinator'
+  | 'optin-monster'
+  | 'opencart'
+  | 'expeditedssl'
+  | 'battery-full'
+  | 'battery-three-quarters'
+  | 'battery-half'
+  | 'battery-quarter'
+  | 'battery-empty'
+  | 'mouse-pointer'
+  | 'i-cursor'
+  | 'object-group'
+  | 'object-ungroup'
+  | 'sticky-note'
+  | 'sticky-note-o'
+  | 'cc-jcb'
+  | 'cc-diners-club'
+  | 'clone'
+  | 'balance-scale'
+  | 'hourglass-o'
+  | 'hourglass-start'
+  | 'hourglass-half'
+  | 'hourglass-end'
+  | 'hourglass'
+  | 'hand-rock-o'
+  | 'hand-paper-o'
+  | 'hand-scissors-o'
+  | 'hand-lizard-o'
+  | 'hand-spock-o'
+  | 'hand-pointer-o'
+  | 'hand-peace-o'
+  | 'trademark'
+  | 'registered'
+  | 'creative-commons'
+  | 'gg'
+  | 'gg-circle'
+  | 'tripadvisor'
+  | 'odnoklassniki'
+  | 'odnoklassniki-square'
+  | 'get-pocket'
+  | 'wikipedia-w'
+  | 'safari'
+  | 'chrome'
+  | 'firefox'
+  | 'opera'
+  | 'internet-explorer'
+  | 'television'
+  | 'contao'
+  | 'calendar-plus-o'
+  | 'calendar-minus-o'
+  | 'calendar-times-o'
+  | 'calendar-check-o'
+  | 'industry'
+  | 'map-pin'
+  | 'map-signs'
+  | 'map-o'
+  | 'map'
+  | 'commenting'
+  | 'commenting-o'
+  | 'houzz'
+  | 'vimeo'
+  | 'black-tie'
+  | 'fonticons'
+  | 'reddit-alien'
+  | 'edge'
+  | 'credit-card-alt'
+  | 'codiepie'
+  | 'modx'
+  | 'fort-awesome'
+  | 'usb'
+  | 'product-hunt'
+  | 'mixcloud'
+  | 'scribd'
+  | 'pause-circle'
+  | 'pause-circle-o'
+  | 'stop-circle'
+  | 'stop-circle-o'
+  | 'shopping-bag'
+  | 'shopping-basket'
+  | 'hashtag'
+  | 'bluetooth'
+  | 'bluetooth-b'
+  | 'percent'
+  | 'gitlab'
+  | 'wpbeginner'
+  | 'wpforms'
+  | 'envira'
+  | 'universal-access'
+  | 'wheelchair-alt'
+  | 'question-circle-o'
+  | 'blind'
+  | 'audio-description'
+  | 'volume-control-phone'
+  | 'braille'
+  | 'assistive-listening-systems'
+  | 'american-sign-language-interpreting'
+  | 'deaf'
+  | 'glide'
+  | 'glide-g'
+  | 'sign-language'
+  | 'low-vision'
+  | 'viadeo'
+  | 'viadeo-square'
+  | 'snapchat'
+  | 'snapchat-ghost'
+  | 'snapchat-square'
+  | 'pied-piper'
+  | 'first-order'
+  | 'themeisle'
+  | 'google-plus-official'
+  | 'font-awesome'
+  | 'handshake-o'
+  | 'envelope-open'
+  | 'envelope-open-o'
+  | 'linode'
+  | 'address-book'
+  | 'address-book-o'
+  | 'address-card'
+  | 'address-card-o'
+  | 'user-circle'
+  | 'user-circle-o'
+  | 'user-o'
+  | 'id-badge'
+  | 'id-card'
+  | 'id-card-o'
+  | 'thermometer-full'
+  | 'thermometer-three-quarters'
+  | 'thermometer-half'
+  | 'thermometer-quarter'
+  | 'thermometer-empty'
+  | 'shower'
+  | 'bath'
+  | 'podcast'
+  | 'window-maximize'
+  | 'window-minimize'
+  | 'window-restore'
+  | 'window-close'
+  | 'window-close-o'
+  | 'bandcamp'
+  | 'grav'
+  | 'imdb'
+  | 'ravelry'
+  | 'eercast'
+  | 'microchip'
+  | 'snowflake-o'
+  | 'superpowers'
+  | 'wpexplorer'
+  | 'meetup';
+
+export const getAvailableIcons = (): IconType[] => [
+  'glass',
+  'music',
+  'search',
+  'envelope-o',
+  'heart',
+  'star',
+  'star-o',
+  'user',
+  'film',
+  'th-large',
+  'th',
+  'th-list',
+  'check',
+  'times',
+  'search-plus',
+  'search-minus',
+  'power-off',
+  'signal',
+  'cog',
+  'trash-o',
+  'home',
+  'file-o',
+  'clock-o',
+  'road',
+  'download',
+  'arrow-circle-o-down',
+  'arrow-circle-o-up',
+  'inbox',
+  'play-circle-o',
+  'repeat',
+  'refresh',
+  'list-alt',
+  'lock',
+  'flag',
+  'headphones',
+  'volume-off',
+  'volume-down',
+  'volume-up',
+  'qrcode',
+  'barcode',
+  'tag',
+  'tags',
+  'book',
+  'bookmark',
+  'print',
+  'camera',
+  'font',
+  'bold',
+  'italic',
+  'text-height',
+  'text-width',
+  'align-left',
+  'align-center',
+  'align-right',
+  'align-justify',
+  'list',
+  'outdent',
+  'indent',
+  'video-camera',
+  'picture-o',
+  'pencil',
+  'map-marker',
+  'adjust',
+  'tint',
+  'pencil-square-o',
+  'share-square-o',
+  'check-square-o',
+  'arrows',
+  'step-backward',
+  'fast-backward',
+  'backward',
+  'play',
+  'pause',
+  'stop',
+  'forward',
+  'fast-forward',
+  'step-forward',
+  'eject',
+  'chevron-left',
+  'chevron-right',
+  'plus-circle',
+  'minus-circle',
+  'times-circle',
+  'check-circle',
+  'question-circle',
+  'info-circle',
+  'crosshairs',
+  'times-circle-o',
+  'check-circle-o',
+  'ban',
+  'arrow-left',
+  'arrow-right',
+  'arrow-up',
+  'arrow-down',
+  'share',
+  'expand',
+  'compress',
+  'plus',
+  'minus',
+  'asterisk',
+  'exclamation-circle',
+  'gift',
+  'leaf',
+  'fire',
+  'eye',
+  'eye-slash',
+  'exclamation-triangle',
+  'plane',
+  'calendar',
+  'random',
+  'comment',
+  'magnet',
+  'chevron-up',
+  'chevron-down',
+  'retweet',
+  'shopping-cart',
+  'folder',
+  'folder-open',
+  'arrows-v',
+  'arrows-h',
+  'bar-chart',
+  'camera-retro',
+  'key',
+  'cogs',
+  'comments',
+  'thumbs-o-up',
+  'thumbs-o-down',
+  'star-half',
+  'heart-o',
+  'sign-out',
+  'linkedin-square',
+  'thumb-tack',
+  'external-link',
+  'sign-in',
+  'trophy',
+  'github-square',
+  'upload',
+  'lemon-o',
+  'phone',
+  'square-o',
+  'bookmark-o',
+  'phone-square',
+  'github',
+  'unlock',
+  'credit-card',
+  'rss',
+  'hdd-o',
+  'bullhorn',
+  'bell',
+  'certificate',
+  'hand-o-right',
+  'hand-o-left',
+  'hand-o-up',
+  'hand-o-down',
+  'arrow-circle-left',
+  'arrow-circle-right',
+  'arrow-circle-up',
+  'arrow-circle-down',
+  'globe',
+  'wrench',
+  'tasks',
+  'filter',
+  'briefcase',
+  'arrows-alt',
+  'users',
+  'link',
+  'cloud',
+  'flask',
+  'scissors',
+  'files-o',
+  'paperclip',
+  'floppy-o',
+  'square',
+  'bars',
+  'list-ul',
+  'list-ol',
+  'strikethrough',
+  'underline',
+  'table',
+  'magic',
+  'truck',
+  'pinterest',
+  'pinterest-square',
+  'google-plus-square',
+  'google-plus',
+  'money',
+  'caret-down',
+  'caret-up',
+  'caret-left',
+  'caret-right',
+  'columns',
+  'sort',
+  'sort-desc',
+  'sort-asc',
+  'envelope',
+  'linkedin',
+  'undo',
+  'gavel',
+  'tachometer',
+  'comment-o',
+  'comments-o',
+  'bolt',
+  'sitemap',
+  'umbrella',
+  'clipboard',
+  'lightbulb-o',
+  'exchange',
+  'cloud-download',
+  'cloud-upload',
+  'user-md',
+  'stethoscope',
+  'suitcase',
+  'bell-o',
+  'coffee',
+  'cutlery',
+  'file-text-o',
+  'building-o',
+  'hospital-o',
+  'ambulance',
+  'medkit',
+  'fighter-jet',
+  'beer',
+  'h-square',
+  'plus-square',
+  'angle-double-left',
+  'angle-double-right',
+  'angle-double-up',
+  'angle-double-down',
+  'angle-left',
+  'angle-right',
+  'angle-up',
+  'angle-down',
+  'desktop',
+  'laptop',
+  'tablet',
+  'mobile',
+  'circle-o',
+  'quote-left',
+  'quote-right',
+  'spinner',
+  'circle',
+  'reply',
+  'github-alt',
+  'folder-o',
+  'folder-open-o',
+  'smile-o',
+  'frown-o',
+  'meh-o',
+  'gamepad',
+  'keyboard-o',
+  'flag-o',
+  'flag-checkered',
+  'terminal',
+  'code',
+  'reply-all',
+  'star-half-o',
+  'location-arrow',
+  'crop',
+  'code-fork',
+  'chain-broken',
+  'question',
+  'info',
+  'exclamation',
+  'superscript',
+  'subscript',
+  'eraser',
+  'puzzle-piece',
+  'microphone',
+  'microphone-slash',
+  'shield',
+  'calendar-o',
+  'fire-extinguisher',
+  'rocket',
+  'maxcdn',
+  'chevron-circle-left',
+  'chevron-circle-right',
+  'chevron-circle-up',
+  'chevron-circle-down',
+  'html5',
+  'css3',
+  'anchor',
+  'unlock-alt',
+  'bullseye',
+  'ellipsis-h',
+  'ellipsis-v',
+  'rss-square',
+  'play-circle',
+  'ticket',
+  'minus-square',
+  'minus-square-o',
+  'level-up',
+  'level-down',
+  'check-square',
+  'pencil-square',
+  'external-link-square',
+  'share-square',
+  'compass',
+  'caret-square-o-down',
+  'caret-square-o-up',
+  'caret-square-o-right',
+  'eur',
+  'gbp',
+  'usd',
+  'inr',
+  'jpy',
+  'rub',
+  'krw',
+  'btc',
+  'file',
+  'file-text',
+  'sort-alpha-asc',
+  'sort-alpha-desc',
+  'sort-amount-asc',
+  'sort-amount-desc',
+  'sort-numeric-asc',
+  'sort-numeric-desc',
+  'thumbs-up',
+  'thumbs-down',
+  'youtube-square',
+  'youtube',
+  'xing',
+  'xing-square',
+  'youtube-play',
+  'dropbox',
+  'stack-overflow',
+  'instagram',
+  'flickr',
+  'adn',
+  'bitbucket',
+  'bitbucket-square',
+  'tumblr',
+  'tumblr-square',
+  'long-arrow-down',
+  'long-arrow-up',
+  'long-arrow-left',
+  'long-arrow-right',
+  'apple',
+  'windows',
+  'android',
+  'linux',
+  'dribbble',
+  'skype',
+  'foursquare',
+  'trello',
+  'female',
+  'male',
+  'gratipay',
+  'sun-o',
+  'moon-o',
+  'archive',
+  'bug',
+  'vk',
+  'weibo',
+  'renren',
+  'pagelines',
+  'stack-exchange',
+  'arrow-circle-o-right',
+  'arrow-circle-o-left',
+  'caret-square-o-left',
+  'dot-circle-o',
+  'wheelchair',
+  'vimeo-square',
+  'try',
+  'plus-square-o',
+  'space-shuttle',
+  'slack',
+  'envelope-square',
+  'wordpress',
+  'openid',
+  'university',
+  'graduation-cap',
+  'yahoo',
+  'google',
+  'reddit',
+  'reddit-square',
+  'stumbleupon-circle',
+  'stumbleupon',
+  'delicious',
+  'digg',
+  'pied-piper-pp',
+  'pied-piper-alt',
+  'drupal',
+  'joomla',
+  'language',
+  'fax',
+  'building',
+  'child',
+  'paw',
+  'spoon',
+  'cube',
+  'cubes',
+  'behance',
+  'behance-square',
+  'steam',
+  'steam-square',
+  'recycle',
+  'car',
+  'taxi',
+  'tree',
+  'database',
+  'file-pdf-o',
+  'file-word-o',
+  'file-excel-o',
+  'file-powerpoint-o',
+  'file-image-o',
+  'file-archive-o',
+  'file-audio-o',
+  'file-video-o',
+  'file-code-o',
+  'life-ring',
+  'circle-o-notch',
+  'rebel',
+  'empire',
+  'git-square',
+  'git',
+  'qq',
+  'paper-plane',
+  'paper-plane-o',
+  'history',
+  'circle-thin',
+  'header',
+  'paragraph',
+  'sliders',
+  'share-alt',
+  'share-alt-square',
+  'bomb',
+  'futbol-o',
+  'tty',
+  'binoculars',
+  'plug',
+  'newspaper-o',
+  'wifi',
+  'calculator',
+  'cc-visa',
+  'cc-mastercard',
+  'cc-discover',
+  'cc-amex',
+  'cc-paypal',
+  'cc-stripe',
+  'bell-slash',
+  'bell-slash-o',
+  'trash',
+  'copyright',
+  'at',
+  'eyedropper',
+  'paint-brush',
+  'birthday-cake',
+  'area-chart',
+  'pie-chart',
+  'line-chart',
+  'lastfm',
+  'lastfm-square',
+  'toggle-off',
+  'toggle-on',
+  'bicycle',
+  'bus',
+  'ioxhost',
+  'angellist',
+  'cc',
+  'ils',
+  'meanpath',
+  'buysellads',
+  'connectdevelop',
+  'dashcube',
+  'forumbee',
+  'leanpub',
+  'sellsy',
+  'shirtsinbulk',
+  'simplybuilt',
+  'skyatlas',
+  'cart-plus',
+  'cart-arrow-down',
+  'diamond',
+  'ship',
+  'user-secret',
+  'motorcycle',
+  'street-view',
+  'heartbeat',
+  'venus',
+  'mars',
+  'mercury',
+  'transgender',
+  'transgender-alt',
+  'venus-double',
+  'mars-double',
+  'venus-mars',
+  'mars-stroke',
+  'mars-stroke-v',
+  'mars-stroke-h',
+  'neuter',
+  'genderless',
+  'facebook-official',
+  'pinterest-p',
+  'whatsapp',
+  'server',
+  'user-plus',
+  'user-times',
+  'bed',
+  'viacoin',
+  'train',
+  'subway',
+  'medium',
+  'y-combinator',
+  'optin-monster',
+  'opencart',
+  'expeditedssl',
+  'battery-full',
+  'battery-three-quarters',
+  'battery-half',
+  'battery-quarter',
+  'battery-empty',
+  'mouse-pointer',
+  'i-cursor',
+  'object-group',
+  'object-ungroup',
+  'sticky-note',
+  'sticky-note-o',
+  'cc-jcb',
+  'cc-diners-club',
+  'clone',
+  'balance-scale',
+  'hourglass-o',
+  'hourglass-start',
+  'hourglass-half',
+  'hourglass-end',
+  'hourglass',
+  'hand-rock-o',
+  'hand-paper-o',
+  'hand-scissors-o',
+  'hand-lizard-o',
+  'hand-spock-o',
+  'hand-pointer-o',
+  'hand-peace-o',
+  'trademark',
+  'registered',
+  'creative-commons',
+  'gg',
+  'gg-circle',
+  'tripadvisor',
+  'odnoklassniki',
+  'odnoklassniki-square',
+  'get-pocket',
+  'wikipedia-w',
+  'safari',
+  'chrome',
+  'firefox',
+  'opera',
+  'internet-explorer',
+  'television',
+  'contao',
+  'calendar-plus-o',
+  'calendar-minus-o',
+  'calendar-times-o',
+  'calendar-check-o',
+  'industry',
+  'map-pin',
+  'map-signs',
+  'map-o',
+  'map',
+  'commenting',
+  'commenting-o',
+  'houzz',
+  'vimeo',
+  'black-tie',
+  'fonticons',
+  'reddit-alien',
+  'edge',
+  'credit-card-alt',
+  'codiepie',
+  'modx',
+  'fort-awesome',
+  'usb',
+  'product-hunt',
+  'mixcloud',
+  'scribd',
+  'pause-circle',
+  'pause-circle-o',
+  'stop-circle',
+  'stop-circle-o',
+  'shopping-bag',
+  'shopping-basket',
+  'hashtag',
+  'bluetooth',
+  'bluetooth-b',
+  'percent',
+  'gitlab',
+  'wpbeginner',
+  'wpforms',
+  'envira',
+  'universal-access',
+  'wheelchair-alt',
+  'question-circle-o',
+  'blind',
+  'audio-description',
+  'volume-control-phone',
+  'braille',
+  'assistive-listening-systems',
+  'american-sign-language-interpreting',
+  'deaf',
+  'glide',
+  'glide-g',
+  'sign-language',
+  'low-vision',
+  'viadeo',
+  'viadeo-square',
+  'snapchat',
+  'snapchat-ghost',
+  'snapchat-square',
+  'pied-piper',
+  'first-order',
+  'themeisle',
+  'google-plus-official',
+  'font-awesome',
+  'handshake-o',
+  'envelope-open',
+  'envelope-open-o',
+  'linode',
+  'address-book',
+  'address-book-o',
+  'address-card',
+  'address-card-o',
+  'user-circle',
+  'user-circle-o',
+  'user-o',
+  'id-badge',
+  'id-card',
+  'id-card-o',
+  'thermometer-full',
+  'thermometer-three-quarters',
+  'thermometer-half',
+  'thermometer-quarter',
+  'thermometer-empty',
+  'shower',
+  'bath',
+  'podcast',
+  'window-maximize',
+  'window-minimize',
+  'window-restore',
+  'window-close',
+  'window-close-o',
+  'bandcamp',
+  'grav',
+  'imdb',
+  'ravelry',
+  'eercast',
+  'microchip',
+  'snowflake-o',
+  'superpowers',
+  'wpexplorer',
+  'meetup',
+];