mol-plugin-ui: strongly typed icons & icons preview HTML

src/mol-plugin-ui/base.tsx

@@ -8,6 +8,7 @@
 import * as React from 'react';
 import { Observable, Subscription } from 'rxjs';
 import { PluginContext } from '../mol-plugin/context';
+import { Icon } from './controls/icons';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);
 
@@ -86,7 +87,7 @@ export abstract class CollapsableControls<P = {}, S = {}, SS = {}> extends Plugi
         return <div className={wrapClass}>
             <div className='msp-transform-header'>
                 <button className='msp-btn msp-btn-block msp-btn-collapse' onClick={this.toggleCollapsed}>
-                    <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />
+                    <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />
                     {this.state.header}
                 </button>
             </div>

src/mol-plugin-ui/camera.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { PluginUIComponent } from './base';
 import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { ParameterControls } from './controls/parameters';
-import { Icon } from './controls/common';
+import { Icon } from './controls/icons';
 
 export class CameraSnapshots extends PluginUIComponent<{ }, { }> {
     render() {
@@ -69,7 +69,7 @@ class CameraSnapshotList extends PluginUIComponent<{ }, { }> {
             {this.plugin.state.cameraSnapshots.state.entries.valueSeq().map(e =><li key={e!.id}>
                 <button className='msp-btn msp-btn-block msp-form-control' onClick={this.apply(e!.id)}>{e!.name || e!.timestamp} <small>{e!.description}</small></button>
                 <button onClick={this.remove(e!.id)} className='msp-btn msp-btn-link msp-state-list-remove-button'>
-                    <span className='msp-icon msp-icon-remove' />
+                    <Icon name='remove' />
                 </button>
             </li>)}
         </ul>;

src/mol-plugin-ui/controls.tsx

@@ -10,7 +10,7 @@ import { PluginCommands } from '../mol-plugin/commands';
 import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
 import { PluginUIComponent } from './base';
 import { LociLabelEntry } from '../mol-plugin/util/loci-label-manager';
-import { IconButton, Icon } from './controls/common';
+import { IconButton } from './controls/common';
 import { PluginStateObject } from '../mol-plugin-state/objects';
 import { StateTransforms } from '../mol-plugin-state/transforms';
 import { StateTransformer } from '../mol-state';
@@ -19,6 +19,7 @@ import { AnimationControls } from './state/animation';
 import { StructureRepresentationControls } from './structure/representation';
 import { StructureSelectionControls } from './structure/selection';
 import { StructureMeasurementsControls } from './structure/measurements';
+import { Icon } from './controls/icons';
 
 export class TrajectoryViewportControls extends PluginUIComponent<{}, { show: boolean, label: string }> {
     state = { show: false, label: '' }

src/mol-plugin-ui/controls/action-menu.tsx

@@ -5,7 +5,7 @@
  */
 
 import * as React from 'react'
-import { Icon } from './common';
+import { Icon, IconName } from './icons';
 import { ParamDefinition } from '../../mol-util/param-definition';
 
 export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
@@ -32,7 +32,7 @@ export namespace ActionMenu {
     export type OnSelect = (item: Item | undefined) => void
 
     export type Items = string | Item | [Items]
-    export type Item = { label: string, icon?: string, value: unknown }
+    export type Item = { label: string, icon?: IconName, value: unknown }
 
     export function Item(label: string, value: unknown): Item
     export function Item(label: string, icon: string, value: unknown): Item
@@ -126,7 +126,7 @@ class Section extends React.PureComponent<SectionProps, SectionState> {
         return <div>
             {header && <div className='msp-control-group-header' style={{ marginTop: '1px' }}>
                 <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
-                    <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'collapse' : 'expand'}`} />
+                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {hasCurrent ? <b>{header}</b> : header}
                 </button>
             </div>}

src/mol-plugin-ui/controls/common.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author David Sehnal <david.sehnal@gmail.com>
  */
@@ -7,13 +7,14 @@
 import * as React from 'react';
 import { Color } from '../../mol-util/color';
 import { PurePluginUIComponent } from '../base';
+import { IconName, Icon } from './icons';
 
 export class ControlGroup extends React.Component<{
     header: string,
     initialExpanded?: boolean,
     hideExpander?: boolean,
     hideOffset?: boolean,
-    topRightIcon?: string,
+    topRightIcon?: IconName,
     onHeaderClick?: () => void
 }, { isExpanded: boolean }> {
     state = { isExpanded: !!this.props.initialExpanded }
@@ -222,33 +223,6 @@ export class NumericInput extends React.PureComponent<{
     }
 }
 
-export function Icon(props: {
-    name: string,
-    style?: React.CSSProperties
-}) {
-    return <span className={`msp-icon msp-icon-${props.name}`} style={props.style} />;
-}
-
-export function IconButton(props: {
-    icon: string,
-    isSmall?: boolean,
-    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void,
-    title?: string,
-    toggleState?: boolean,
-    disabled?: boolean,
-    customClass?: string,
-    style?: React.CSSProperties,
-    'data-id'?: string,
-    extraContent?: JSX.Element
-}) {
-    let className = `msp-btn-link msp-btn-icon${props.isSmall ? '-small' : ''}${props.customClass ? ' ' + props.customClass : ''}`;
-    if (typeof props.toggleState !== 'undefined') className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
-    return <button className={className} onClick={props.onClick} title={props.title} disabled={props.disabled} data-id={props['data-id']} style={props.style}>
-        <span className={`msp-icon msp-icon-${props.icon}`}/>
-        {props.extraContent}
-    </button>;
-}
-
 export class ExpandableGroup extends React.Component<{
     label: string,
     colorStripe?: Color,
@@ -268,7 +242,7 @@ export class ExpandableGroup extends React.Component<{
                     {label}
                     <button className='msp-btn-link msp-btn-icon msp-control-group-expander' onClick={this.toggleExpanded} title={`${this.state.isExpanded ? 'Less' : 'More'} options`}
                         style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
-                        <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'minus' : 'plus'}`} style={{ display: 'inline-block' }} />
+                        <Icon name={this.state.isExpanded ? 'minus' : 'plus'} style={{ display: 'inline-block' }} />
                     </button>
                 </span>
                 <div>{pivot}</div>
@@ -281,6 +255,26 @@ export class ExpandableGroup extends React.Component<{
     }
 }
 
+export function IconButton(props: {
+    icon: IconName,
+    isSmall?: boolean,
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void,
+    title?: string,
+    toggleState?: boolean,
+    disabled?: boolean,
+    customClass?: string,
+    style?: React.CSSProperties,
+    'data-id'?: string,
+    extraContent?: JSX.Element
+}) {
+    let className = `msp-btn-link msp-btn-icon${props.isSmall ? '-small' : ''}${props.customClass ? ' ' + props.customClass : ''}`;
+    if (typeof props.toggleState !== 'undefined') className += ` msp-btn-link-toggle-${props.toggleState ? 'on' : 'off'}`
+    return <button className={className} onClick={props.onClick} title={props.title} disabled={props.disabled} data-id={props['data-id']} style={props.style}>
+        <Icon name={props.icon} />
+        {props.extraContent}
+    </button>;
+}
+
 export class ButtonSelect extends React.PureComponent<{ label: string, onChange: (value: string) => void, disabled?: boolean }> {
 
     onChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -301,7 +295,7 @@ export function Options(options: [string, string][]) {
     return options.map(([value, label]) => <option key={value} value={value}>{label}</option>)
 }
 
-export function SectionHeader(props: { icon?: string, title: string | JSX.Element, desc?: string}) {
+export function SectionHeader(props: { icon?: IconName, title: string | JSX.Element, desc?: string}) {
     return <div className='msp-section-header'>
         {props.icon && <Icon name={props.icon} />}
         {props.title} <small>{props.desc}</small>
@@ -314,7 +308,7 @@ export type ToggleButtonProps = {
     disabled?: boolean,
     label: string | JSX.Element,
     title?: string,
-    icon?: string,
+    icon?: IconName,
     isSelected?: boolean,
     toggle: () => void
 }
@@ -330,7 +324,7 @@ export class ToggleButton extends React.PureComponent<ToggleButtonProps> {
         const label = props.label;
         return <button onClick={this.onClick} title={this.props.title}
             disabled={props.disabled} style={props.style} className={props.className}>
-            {this.props.icon ? <span className={`msp-icon msp-icon-${this.props.icon}`} /> : ''}
+            <Icon name={this.props.icon} />
             {this.props.isSelected ? <b>{label}</b> : label}
         </button>;
     }

src/mol-plugin-ui/controls/icons.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author David Sehnal <david.sehnal@gmail.com>
+ */
+
+import * as React from 'react';
+
+export type IconName = 
+    | '' | 'expand-layout' | 'plus' | 'minus' | 'reset-scene' | 'ok' | 'back' | 'block' | 'off' | 'expand' | 'collapse' | 'visual-visibility'
+    | 'abort' | 'focus-on-visual' | 'settings' | 'tools' | 'log' | 'remove' | 'help' | 'help-circle' | 'info' | 'left-open-big' | 'right-open-big'
+    | 'left-open' | 'right-open' | 'screenshot' | 'model-prev' | 'model-next' | 'model-first' | 'down-thin' | 'up-thin' | 'left-thin' | 'right-thin'
+    | 'switch' | 'play' | 'stop' | 'pause' | 'cw' | 'database' | 'upload' | 'record' | 'code' | 'floppy' | 'tape' | 'flow-cascade' | 'flow-tree'
+    | 'home' | 'address' | 'download' | 'export' | 'palette' | 'search' | 'flashlight' | 'mail' | 'heart' | 'heart-empty' | 'star' | 'star-empty'
+    | 'user' | 'users' | 'user-add' | 'video' | 'picture' | 'camera' | 'layout' | 'menu' | 'check' | 'cancel' | 'cancel-circled' | 'cancel-squared'
+    | 'plus-circled' | 'plus-squared' | 'minus-circled' | 'minus-squared' | 'help-circled' | 'info-circled' | 'link' | 'attach' | 'lock' | 'lock-open'
+    | 'eye' | 'tag' | 'bookmark' | 'bookmarks' | 'flag' | 'thumbs-up' | 'thumbs-down' | 'upload-cloud' | 'reply' | 'reply-all' | 'forward' | 'quote'
+    | 'pencil' | 'feather' | 'print' | 'retweet' | 'keyboard' | 'comment' | 'chat' | 'bell' | 'attention' | 'alert' | 'vcard' | 'location' | 'map'
+    | 'direction' | 'compass' | 'cup' | 'trash' | 'doc' | 'docs' | 'doc-landscape' | 'doc-text' | 'doc-text-inv' | 'newspaper' | 'book-open' | 'book'
+    | 'folder' | 'archive' | 'box' | 'rss' | 'phone' | 'cog' | 'share' | 'shareable' | 'basket' | 'bag' | 'calendar' | 'login' | 'logout' | 'mic'
+    | 'mute' | 'sound' | 'volume' | 'clock' | 'hourglass' | 'lamp' | 'light-down' | 'light-up' | 'adjust' | 'resize-full' | 'resize-small' | 'popup'
+    | 'publish' | 'window' | 'arrow-combo' | 'down-circled' | 'left-circled' | 'right-circled' | 'up-circled' | 'down-open' | 'up-open' | 'down-open-mini'
+    | 'left-open-mini' | 'right-open-mini' | 'up-open-mini' | 'down-open-big' | 'up-open-big' | 'down' | 'left' | 'right' | 'up' | 'down-dir' | 'left-dir'
+    | 'right-dir' | 'up-dir' | 'down-bold' | 'left-bold' | 'right-bold' | 'up-bold' | 'ccw' | 'arrows-ccw' | 'level-down' | 'level-up' | 'shuffle'
+    | 'loop' | 'to-end' | 'to-start' | 'fast-forward' | 'fast-backward' | 'progress-0' | 'progress-1' | 'progress-2' | 'progress-3' | 'target' | 'list'
+    | 'list-add' | 'battery' | 'back-in-time' | 'monitor' | 'mobile' | 'cd' | 'inbox' | 'install' | 'globe' | 'cloud' | 'cloud-thunder' | 'flash'
+    | 'moon' | 'flight' | 'paper-plane' | 'leaf' | 'lifebuoy' | 'mouse' | 'briefcase' | 'suitcase' | 'dot' | 'dot-2' | 'dot-3' | 'brush' | 'infinity'
+    | 'erase' | 'chart-pie' | 'chart-line' | 'chart-bar' | 'chart-area' | 'graduation-cap' | 'language' | 'ticket' | 'water' | 'droplet' | 'air'
+    | 'credit-card' | 'clipboard' | 'megaphone' | 'drive' | 'bucket' | 'thermometer' | 'key' | 'flow-branch' | 'flow-line' | 'flow-parallel' | 'rocket'
+    | 'gauge' | 'help-circle-collapse' | 'help-circle-expand'
+
+export function Icon(props: {
+    name: IconName | undefined,
+    style?: React.CSSProperties,
+    title?: string
+}) {
+    if (!props.name) return null;
+    return <span className={`msp-icon msp-icon-${props.name}`} style={props.style} title={props.title} />;
+}

src/mol-plugin-ui/controls/parameters.tsx

@@ -23,6 +23,7 @@ import { getPrecision } from '../../mol-util/number';
 import { ParamMapping } from '../../mol-util/param-mapping';
 import { PluginContext } from '../../mol-plugin/context';
 import { ActionMenu } from './action-menu';
+import { Icon } from './icons';
 
 export type ParameterControlsCategoryFilter = string | null | (string | null)[]
 
@@ -122,7 +123,7 @@ class ExpandGroup extends React.PureComponent<{ header: string, initiallyExpande
         return <>
             <div className='msp-control-group-header' style={{ marginTop: '1px' }}>
                 <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
-                    <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'collapse' : 'expand'}`} />
+                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {this.props.header}
                 </button>
             </div>
@@ -218,7 +219,7 @@ export class ParamHelp<L extends LegendData> extends React.PureComponent<{ legen
 
         return <div className='msp-control-row msp-help-text'>
             <div>
-                <div className='msp-help-description'><span className={`msp-icon msp-icon-help-circle`} />{description}</div>
+                <div className='msp-help-description'><Icon name='help-circle' />{description}</div>
                 {Legend && <div className='msp-help-legend'><Legend legend={legend} /></div>}
             </div>
         </div>
@@ -259,7 +260,7 @@ function renderSimple(options: { props: ParamProps<any>, state: { showHelp: bool
                     <button className='msp-help msp-btn-link msp-btn-icon msp-control-group-expander' onClick={toggleHelp}
                         title={desc || `${state.showHelp ? 'Hide' : 'Show'} help`}
                         style={{ background: 'transparent', textAlign: 'left', padding: '0' }}>
-                        <span className={`msp-icon msp-icon-help-circle-${state.showHelp ? 'collapse' : 'expand'}`} />
+                        <Icon name={state.showHelp ? 'help-circle-collapse' : 'help-circle-expand'} />
                     </button>
                 }
             </span>
@@ -301,7 +302,7 @@ export class BoolControl extends SimpleParam<PD.BooleanParam> {
     onClick = (e: React.MouseEvent<HTMLButtonElement>) => { this.update(!this.props.value); e.currentTarget.blur(); }
     renderControl() {
         return <button onClick={this.onClick} disabled={this.props.isDisabled}>
-            <span className={`msp-icon msp-icon-${this.props.value ? 'ok' : 'off'}`} />
+            <Icon name={this.props.value ? 'ok' : 'off'} />
             {this.props.value ? 'On' : 'Off'}
         </button>;
     }
@@ -799,7 +800,7 @@ export class GroupControl extends React.PureComponent<ParamProps<PD.Group<any>>
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
                 <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
-                    <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'collapse' : 'expand'}`} />
+                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {label}
                 </button>
             </div>

src/mol-plugin-ui/left-panel.tsx

@@ -17,6 +17,7 @@ import { ParamDefinition as PD } from '../mol-util/param-definition';
 import { StateSnapshots, RemoteStateSnapshots } from './state/snapshots';
 import { HelpContent } from './viewport/help';
 import { LeftPanelTabName } from '../mol-plugin/layout';
+import { IconName } from './controls/icons';
 
 export class LeftPanelControls extends PluginUIComponent<{}, { tab: LeftPanelTabName }> {
     state = { tab: this.plugin.behaviors.layout.leftPanelTabName.value };
@@ -130,7 +131,7 @@ class FullSettings extends PluginUIComponent {
         this.subscribe(this.plugin.events.interactivity.propsUpdated, () => this.forceUpdate());
     }
 
-    icon(name: string, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
+    icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
         return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} />;
     }
 

src/mol-plugin-ui/sequence.tsx

@@ -21,6 +21,7 @@ import { State, StateSelection } from '../mol-state';
 import { ChainSequenceWrapper } from './sequence/chain';
 import { ElementSequenceWrapper } from './sequence/element';
 import { elementLabel } from '../mol-theme/label';
+import { Icon } from './controls/icons';
 
 const MaxDisplaySequenceLength = 5000
 
@@ -292,8 +293,8 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
         if (this.getStructure(this.state.structureRef) === Structure.Empty) {
             return <div className='msp-sequence'>
                 <div className='msp-sequence-select'>
-                    <span className={`msp-icon msp-icon-help-circle`} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
-                        title='This shows a single sequence. Use the controls to show a different sequence.' />
+                    <Icon name='help-circle' style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+                        title='This shows a single sequence. Use the controls to show a different sequence.'/>
 
                     <span>Sequence</span><span style={{ fontWeight: 'normal' }}>No structure available</span>
                 </div>
@@ -307,7 +308,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
 
         return <div className='msp-sequence'>
             <div className='msp-sequence-select'>
-                <span className={`msp-icon msp-icon-help-circle`} style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
+                <Icon name='help-circle' style={{ cursor: 'help', position: 'absolute', right: 0, top: 0 }}
                     title='This shows a single sequence. Use the controls to show a different sequence.' />
 
                 <span>Sequence of</span>

src/mol-plugin-ui/sequence/sequence.tsx

@@ -290,8 +290,6 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> {
         // residue spans are updated as react won't update them
         this.updateMarker()
 
-        // <span className={`msp-icon msp-icon-help`} style={{ cursor: 'help' }} title='This shows a single sequence. Use the menu on the left to show a different sequence.' />
-
         return <div
             className='msp-sequence-wrapper msp-sequence-wrapper-non-empty'
             onContextMenu={this.contextMenu}

src/mol-plugin-ui/skin/base/icons.scss

@@ -25,194 +25,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.msp-icon-expand-layout:before {
-	content: "\e84a";
-}
-
-.msp-icon-plus:before {
-	content: "\e816";
-}
-
-.msp-icon-minus:before {
-	content: "\e819";
-}
-
-.msp-icon-reset-scene:before {
-	content: "\e891";
-}
-
-.msp-icon-ok:before {
-	content: "\e812";
-}
-
-.msp-icon-back:before {
-	content: "\e820";
-}
-
-.msp-icon-block:before {
-	content: "\e868";
-}
-
-.msp-icon-off:before {
-	content: "\e813";
-}
-
-.msp-icon-expand:before {
-	content: "\e885";
-}
-
-.msp-icon-collapse:before {
-	content: "\e883";
-}
-
-.msp-icon-visual-visibility:before {
-	content: "\e826";
-}
-
-.msp-icon-abort:before {
-	content: "\e814";
-}
-
-.msp-icon-focus-on-visual:before {
-	content: "\e8a3";
-}
-
-.msp-icon-settings:before  {
-	content: "\e855";
-}
-
-.msp-icon-tools:before {
-	content: "\e856";
-}
-
-.msp-icon-log:before {
-	content: "\e8a5";
-}
-
-.msp-icon-remove:before {
-	content: "\e847";
-}
-
-.msp-icon-help:before {
-    content: "\e81c";
-}
-
-.msp-icon-help-circle:before {
-	content: "\e81d";
-}
-
-.msp-icon-info:before {
-    content: "\e81e";
-}
-
-.msp-icon-left-open-big:before {
-    content: "\e87c";
-}
-
-.msp-icon-right-open-big:before {
-    content: "\e87d";
-}
-
-.msp-icon-left-open:before {
-    content: "\e874";
-}
-
-.msp-icon-right-open:before {
-    content: "\e875";
-}
-
-.msp-icon-screenshot:before {
-	content: "\e80f";
-}
-
-.msp-icon-model-prev:before {
-    content: "\e884";
-}
-
-.msp-icon-model-next:before {
-    content: "\e885";
-}
-
-.msp-icon-model-first:before {
-    content: "\e89c";
-}
-
-.msp-icon-down-thin:before {
-	content: "\e88b";
-}
-
-.msp-icon-up-thin:before {
-	content: "\e88e";
-}
-
-.msp-icon-left-thin:before {
-	content: "\e88c";
-}
-
-.msp-icon-right-thin:before {
-	content: "\e88d";
-}
-
-.msp-icon-switch:before {
-	content: "\e896";
-}
-
-.msp-icon-play:before {
-	content: "\e897";
-}
-
-.msp-icon-stop:before {
-	content: "\e898";
-}
-
-.msp-icon-pause:before {
-	content: "\e899";
-}
-
-.msp-icon-left-open:before {
-	content: "\e87c";
-}
-
-.msp-icon-right-open:before {
-	content: "\e87d";
-}
-
-.msp-icon-cw:before {
-	content: "\e890";
-}
-
-.msp-icon-database:before {
-	content: "\e8d3";
-}
-
-.msp-icon-upload:before {
-	content: "\e82e";
-}
-
-.msp-icon-record:before {
-	content: "\e89a";
-}
-
-.msp-icon-code:before {
-	content: "\e834";
-}
-
-.msp-icon-floppy:before {
-	content: "\e8d0";
-}
-
-.msp-icon-tape:before {
-	content: "\e8c8";
-}
-
 .msp-icon-help-circle-expand {
 	width: 2.5em !important;
 }
 .msp-icon-help-circle-expand:before {
 	width: 2.5em !important;
-	content: "\e81d\0020\e885";
-}
-
+	content: "\e81d\0020\e885"; }
 .msp-icon-help-circle-collapse {
 	width: 2.5em !important;
 }
@@ -221,26 +39,236 @@
 	content: "\e81d\0020\e883";
 }
 
-.msp-icon-flow-cascade:before {
-	content: "\e8d8";
-}
-
-.msp-icon-flow-tree:before {
-	content: "\e8da";
-}
-
-.msp-icon-home:before {
-	content: "\e821";
-}
-
-.msp-icon-address:before {
-	content: "\e841";
-}
-
-.msp-icon-download:before {
-	content: "\e82d";
-}
-
-.msp-icon-export:before {
-	content: "\e835";
-}
+.msp-icon-expand-layout:before { content: "\e84a"; }
+.msp-icon-plus:before { content: "\e816"; }
+.msp-icon-minus:before { content: "\e819"; }
+.msp-icon-reset-scene:before { content: "\e891"; }
+.msp-icon-ok:before { content: "\e812"; }
+.msp-icon-back:before { content: "\e820"; }
+.msp-icon-block:before { content: "\e868"; }
+.msp-icon-off:before { content: "\e813"; }
+.msp-icon-expand:before { content: "\e885"; }
+.msp-icon-collapse:before { content: "\e883"; }
+.msp-icon-visual-visibility:before { content: "\e826"; }
+.msp-icon-abort:before { content: "\e814"; }
+.msp-icon-focus-on-visual:before { content: "\e8a3"; }
+.msp-icon-settings:before { content: "\e855"; }
+.msp-icon-tools:before { content: "\e856"; }
+.msp-icon-log:before { content: "\e8a5"; }
+.msp-icon-remove:before { content: "\e847"; }
+.msp-icon-help:before { content: "\e81c"; }
+.msp-icon-help-circle:before { content: "\e81d"; }
+.msp-icon-info:before { content: "\e81e"; }
+.msp-icon-left-open-big:before { content: "\e87c"; }
+.msp-icon-right-open-big:before { content: "\e87d"; }
+.msp-icon-left-open:before { content: "\e87c"; }
+.msp-icon-right-open:before { content: "\e87d"; }
+.msp-icon-screenshot:before { content: "\e80f"; }
+.msp-icon-model-prev:before { content: "\e884"; }
+.msp-icon-model-next:before { content: "\e885"; }
+.msp-icon-model-first:before { content: "\e89c"; }
+.msp-icon-down-thin:before { content: "\e88b"; }
+.msp-icon-up-thin:before { content: "\e88e"; }
+.msp-icon-left-thin:before { content: "\e88c"; }
+.msp-icon-right-thin:before { content: "\e88d"; }
+.msp-icon-switch:before { content: "\e896"; }
+.msp-icon-play:before { content: "\e897"; }
+.msp-icon-stop:before { content: "\e898"; }
+.msp-icon-pause:before { content: "\e899"; }
+.msp-icon-cw:before { content: "\e890"; }
+.msp-icon-database:before { content: "\e8d3"; }
+.msp-icon-upload:before { content: "\e82e"; }
+.msp-icon-record:before { content: "\e89a"; }
+.msp-icon-code:before { content: "\e834"; }
+.msp-icon-floppy:before { content: "\e8d0"; }
+.msp-icon-tape:before { content: "\e8c8"; }
+.msp-icon-flow-cascade:before { content: "\e8d8"; }
+.msp-icon-flow-tree:before { content: "\e8da"; }
+.msp-icon-home:before { content: "\e821"; }
+.msp-icon-address:before { content: "\e841"; }
+.msp-icon-download:before { content: "\e82d"; }
+.msp-icon-export:before { content: "\e835"; }
+.msp-icon-palette:before { content: "\e800"; }
+.msp-icon-search:before { content: "\e803"; }
+.msp-icon-flashlight:before { content: "\e804"; }
+.msp-icon-mail:before { content: "\e805"; }
+.msp-icon-heart:before { content: "\e806"; }
+.msp-icon-heart-empty:before { content: "\e807"; }
+.msp-icon-star:before { content: "\e808"; }
+.msp-icon-star-empty:before { content: "\e809"; }
+.msp-icon-user:before { content: "\e80a"; }
+.msp-icon-users:before { content: "\e80b"; }
+.msp-icon-user-add:before { content: "\e80c"; }
+.msp-icon-video:before { content: "\e80d"; }
+.msp-icon-picture:before { content: "\e80e"; }
+.msp-icon-camera:before { content: "\e80f"; }
+.msp-icon-layout:before { content: "\e810"; }
+.msp-icon-menu:before { content: "\e811"; }
+.msp-icon-check:before { content: "\e812"; }
+.msp-icon-cancel:before { content: "\e813"; }
+.msp-icon-cancel-circled:before { content: "\e814"; }
+.msp-icon-cancel-squared:before { content: "\e815"; }
+.msp-icon-plus-circled:before { content: "\e817"; }
+.msp-icon-plus-squared:before { content: "\e818"; }
+.msp-icon-minus-circled:before { content: "\e81a"; }
+.msp-icon-minus-squared:before { content: "\e81b"; }
+.msp-icon-help-circled:before { content: "\e81d"; }
+.msp-icon-info-circled:before { content: "\e81f"; }
+.msp-icon-link:before { content: "\e822"; }
+.msp-icon-attach:before { content: "\e823"; }
+.msp-icon-lock:before { content: "\e824"; }
+.msp-icon-lock-open:before { content: "\e825"; }
+.msp-icon-eye:before { content: "\e826"; }
+.msp-icon-tag:before { content: "\e827"; }
+.msp-icon-bookmark:before { content: "\e828"; }
+.msp-icon-bookmarks:before { content: "\e829"; }
+.msp-icon-flag:before { content: "\e82a"; }
+.msp-icon-thumbs-up:before { content: "\e82b"; }
+.msp-icon-thumbs-down:before { content: "\e82c"; }
+.msp-icon-upload-cloud:before { content: "\e82f"; }
+.msp-icon-reply:before { content: "\e830"; }
+.msp-icon-reply-all:before { content: "\e831"; }
+.msp-icon-forward:before { content: "\e832"; }
+.msp-icon-quote:before { content: "\e833"; }
+.msp-icon-pencil:before { content: "\e836"; }
+.msp-icon-feather:before { content: "\e837"; }
+.msp-icon-print:before { content: "\e838"; }
+.msp-icon-retweet:before { content: "\e839"; }
+.msp-icon-keyboard:before { content: "\e83a"; }
+.msp-icon-comment:before { content: "\e83b"; }
+.msp-icon-chat:before { content: "\e83c"; }
+.msp-icon-bell:before { content: "\e83d"; }
+.msp-icon-attention:before { content: "\e83e"; }
+.msp-icon-alert:before { content: "\e83f"; }
+.msp-icon-vcard:before { content: "\e840"; }
+.msp-icon-location:before { content: "\e842"; }
+.msp-icon-map:before { content: "\e843"; }
+.msp-icon-direction:before { content: "\e844"; }
+.msp-icon-compass:before { content: "\e845"; }
+.msp-icon-cup:before { content: "\e846"; }
+.msp-icon-trash:before { content: "\e847"; }
+.msp-icon-doc:before { content: "\e848"; }
+.msp-icon-docs:before { content: "\e849"; }
+.msp-icon-doc-landscape:before { content: "\e84a"; }
+.msp-icon-doc-text:before { content: "\e84b"; }
+.msp-icon-doc-text-inv:before { content: "\e84c"; }
+.msp-icon-newspaper:before { content: "\e84d"; }
+.msp-icon-book-open:before { content: "\e84e"; }
+.msp-icon-book:before { content: "\e84f"; }
+.msp-icon-folder:before { content: "\e850"; }
+.msp-icon-archive:before { content: "\e851"; }
+.msp-icon-box:before { content: "\e852"; }
+.msp-icon-rss:before { content: "\e853"; }
+.msp-icon-phone:before { content: "\e854"; }
+.msp-icon-cog:before { content: "\e855"; }
+.msp-icon-share:before { content: "\e857"; }
+.msp-icon-shareable:before { content: "\e858"; }
+.msp-icon-basket:before { content: "\e859"; }
+.msp-icon-bag:before { content: "\e85a"; }
+.msp-icon-calendar:before { content: "\e85b"; }
+.msp-icon-login:before { content: "\e85c"; }
+.msp-icon-logout:before { content: "\e85d"; }
+.msp-icon-mic:before { content: "\e85e"; }
+.msp-icon-mute:before { content: "\e85f"; }
+.msp-icon-sound:before { content: "\e860"; }
+.msp-icon-volume:before { content: "\e861"; }
+.msp-icon-clock:before { content: "\e862"; }
+.msp-icon-hourglass:before { content: "\e863"; }
+.msp-icon-lamp:before { content: "\e864"; }
+.msp-icon-light-down:before { content: "\e865"; }
+.msp-icon-light-up:before { content: "\e866"; }
+.msp-icon-adjust:before { content: "\e867"; }
+.msp-icon-resize-full:before { content: "\e869"; }
+.msp-icon-resize-small:before { content: "\e86a"; }
+.msp-icon-popup:before { content: "\e86b"; }
+.msp-icon-publish:before { content: "\e86c"; }
+.msp-icon-window:before { content: "\e86d"; }
+.msp-icon-arrow-combo:before { content: "\e86e"; }
+.msp-icon-down-circled:before { content: "\e86f"; }
+.msp-icon-left-circled:before { content: "\e870"; }
+.msp-icon-right-circled:before { content: "\e871"; }
+.msp-icon-up-circled:before { content: "\e872"; }
+.msp-icon-down-open:before { content: "\e873"; }
+.msp-icon-up-open:before { content: "\e876"; }
+.msp-icon-down-open-mini:before { content: "\e877"; }
+.msp-icon-left-open-mini:before { content: "\e878"; }
+.msp-icon-right-open-mini:before { content: "\e879"; }
+.msp-icon-up-open-mini:before { content: "\e87a"; }
+.msp-icon-down-open-big:before { content: "\e87b"; }
+.msp-icon-up-open-big:before { content: "\e87e"; }
+.msp-icon-down:before { content: "\e87f"; }
+.msp-icon-left:before { content: "\e880"; }
+.msp-icon-right:before { content: "\e881"; }
+.msp-icon-up:before { content: "\e882"; }
+.msp-icon-down-dir:before { content: "\e883"; }
+.msp-icon-left-dir:before { content: "\e884"; }
+.msp-icon-right-dir:before { content: "\e885"; }
+.msp-icon-up-dir:before { content: "\e886"; }
+.msp-icon-down-bold:before { content: "\e887"; }
+.msp-icon-left-bold:before { content: "\e888"; }
+.msp-icon-right-bold:before { content: "\e889"; }
+.msp-icon-up-bold:before { content: "\e88a"; }
+.msp-icon-ccw:before { content: "\e88f"; }
+.msp-icon-arrows-ccw:before { content: "\e891"; }
+.msp-icon-level-down:before { content: "\e892"; }
+.msp-icon-level-up:before { content: "\e893"; }
+.msp-icon-shuffle:before { content: "\e894"; }
+.msp-icon-loop:before { content: "\e895"; }
+.msp-icon-to-end:before { content: "\e89b"; }
+.msp-icon-to-start:before { content: "\e89c"; }
+.msp-icon-fast-forward:before { content: "\e89d"; }
+.msp-icon-fast-backward:before { content: "\e89e"; }
+.msp-icon-progress-0:before { content: "\e89f"; }
+.msp-icon-progress-1:before { content: "\e8a0"; }
+.msp-icon-progress-2:before { content: "\e8a1"; }
+.msp-icon-progress-3:before { content: "\e8a2"; }
+.msp-icon-target:before { content: "\e8a3"; }
+.msp-icon-list:before { content: "\e8a5"; }
+.msp-icon-list-add:before { content: "\e8a6"; }
+.msp-icon-battery:before { content: "\e8a9"; }
+.msp-icon-back-in-time:before { content: "\e8aa"; }
+.msp-icon-monitor:before { content: "\e8ab"; }
+.msp-icon-mobile:before { content: "\e8ac"; }
+.msp-icon-cd:before { content: "\e8ae"; }
+.msp-icon-inbox:before { content: "\e8af"; }
+.msp-icon-install:before { content: "\e8b0"; }
+.msp-icon-globe:before { content: "\e8b1"; }
+.msp-icon-cloud:before { content: "\e8b2"; }
+.msp-icon-cloud-thunder:before { content: "\e8b3"; }
+.msp-icon-flash:before { content: "\e8b4"; }
+.msp-icon-moon:before { content: "\e8b5"; }
+.msp-icon-flight:before { content: "\e8b6"; }
+.msp-icon-paper-plane:before { content: "\e8b7"; }
+.msp-icon-leaf:before { content: "\e8b8"; }
+.msp-icon-lifebuoy:before { content: "\e8b9"; }
+.msp-icon-mouse:before { content: "\e8ba"; }
+.msp-icon-briefcase:before { content: "\e8bb"; }
+.msp-icon-suitcase:before { content: "\e8bc"; }
+.msp-icon-dot:before { content: "\e8bd"; }
+.msp-icon-dot-2:before { content: "\e8be"; }
+.msp-icon-dot-3:before { content: "\e8bf"; }
+.msp-icon-brush:before { content: "\e8c0"; }
+.msp-icon-infinity:before { content: "\e8c2"; }
+.msp-icon-erase:before { content: "\e8c3"; }
+.msp-icon-chart-pie:before { content: "\e8c4"; }
+.msp-icon-chart-line:before { content: "\e8c5"; }
+.msp-icon-chart-bar:before { content: "\e8c6"; }
+.msp-icon-chart-area:before { content: "\e8c7"; }
+.msp-icon-graduation-cap:before { content: "\e8c9"; }
+.msp-icon-language:before { content: "\e8ca"; }
+.msp-icon-ticket:before { content: "\e8cb"; }
+.msp-icon-water:before { content: "\e8cc"; }
+.msp-icon-droplet:before { content: "\e8cd"; }
+.msp-icon-air:before { content: "\e8ce"; }
+.msp-icon-credit-card:before { content: "\e8cf"; }
+.msp-icon-clipboard:before { content: "\e8d1"; }
+.msp-icon-megaphone:before { content: "\e8d2"; }
+.msp-icon-drive:before { content: "\e8d4"; }
+.msp-icon-bucket:before { content: "\e8d5"; }
+.msp-icon-thermometer:before { content: "\e8d6"; }
+.msp-icon-key:before { content: "\e8d7"; }
+.msp-icon-flow-branch:before { content: "\e8d9"; }
+.msp-icon-flow-line:before { content: "\e8db"; }
+.msp-icon-flow-parallel:before { content: "\e8dc"; }
+.msp-icon-rocket:before { content: "\e8dd"; }
+.msp-icon-gauge:before { content: "\e8de"; }

src/mol-plugin-ui/skin/fonts/fontello.html

@@ -0,0 +1,627 @@
+<!DOCTYPE html>
+<html>
+  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
+    <meta charset="UTF-8"><style>/*
+ * Bootstrap v2.2.1
+ *
+ * Copyright 2012 Twitter, Inc
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Designed and built with all the love in the world @twitter by @mdo and @fat.
+ */
+.clearfix {
+  *zoom: 1;
+}
+.clearfix:before,
+.clearfix:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.clearfix:after {
+  clear: both;
+}
+html {
+  font-size: 100%;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+a:focus {
+  outline: thin dotted #333;
+  outline: 5px auto -webkit-focus-ring-color;
+  outline-offset: -2px;
+}
+a:hover,
+a:active {
+  outline: 0;
+}
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  font-size: 100%;
+  vertical-align: middle;
+}
+button,
+input {
+  *overflow: visible;
+  line-height: normal;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+body {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  color: #333;
+  background-color: #fff;
+}
+a {
+  color: #08c;
+  text-decoration: none;
+}
+a:hover {
+  color: #005580;
+  text-decoration: underline;
+}
+.row {
+  margin-left: -20px;
+  *zoom: 1;
+}
+.row:before,
+.row:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.row:after {
+  clear: both;
+}
+[class*="span"] {
+  float: left;
+  min-height: 1px;
+  margin-left: 20px;
+}
+.container,
+.navbar-static-top .container,
+.navbar-fixed-top .container,
+.navbar-fixed-bottom .container {
+  width: 940px;
+}
+.span12 {
+  width: 940px;
+}
+.span11 {
+  width: 860px;
+}
+.span10 {
+  width: 780px;
+}
+.span9 {
+  width: 700px;
+}
+.span8 {
+  width: 620px;
+}
+.span7 {
+  width: 540px;
+}
+.span6 {
+  width: 460px;
+}
+.span5 {
+  width: 380px;
+}
+.span4 {
+  width: 300px;
+}
+.span3 {
+  width: 220px;
+}
+.span2 {
+  width: 140px;
+}
+.span1 {
+  width: 60px;
+}
+[class*="span"].pull-right,
+.row-fluid [class*="span"].pull-right {
+  float: right;
+}
+.container {
+  margin-right: auto;
+  margin-left: auto;
+  *zoom: 1;
+}
+.container:before,
+.container:after {
+  display: table;
+  content: "";
+  line-height: 0;
+}
+.container:after {
+  clear: both;
+}
+p {
+  margin: 0 0 10px;
+}
+.lead {
+  margin-bottom: 20px;
+  font-size: 21px;
+  font-weight: 200;
+  line-height: 30px;
+}
+small {
+  font-size: 85%;
+}
+h1 {
+  margin: 10px 0;
+  font-family: inherit;
+  font-weight: bold;
+  line-height: 20px;
+  color: inherit;
+  text-rendering: optimizelegibility;
+}
+h1 small {
+  font-weight: normal;
+  line-height: 1;
+  color: #999;
+}
+h1 {
+  line-height: 40px;
+}
+h1 {
+  font-size: 38.5px;
+}
+h1 small {
+  font-size: 24.5px;
+}
+body {
+  margin-top: 90px;
+}
+.header {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  margin-left: -480px;
+  background-color: #fff;
+  border-bottom: 1px solid #ddd;
+  padding-top: 10px;
+  z-index: 10;
+}
+.footer {
+  color: #ddd;
+  font-size: 12px;
+  text-align: center;
+  margin-top: 20px;
+}
+.footer a {
+  color: #ccc;
+  text-decoration: underline;
+}
+.the-icons {
+  font-size: 14px;
+  line-height: 24px;
+}
+.switch {
+  position: absolute;
+  right: 0;
+  bottom: 10px;
+  color: #666;
+}
+.switch input {
+  margin-right: 0.3em;
+}
+.codesOn .i-name {
+  display: none;
+}
+.codesOn .i-code {
+  display: inline;
+}
+.i-code {
+  display: none;
+}
+@font-face {
+      font-family: 'fontello';
+      src: url('./fontello.eot?15936540');
+      src: url('./fontello.eot?15936540#iefix') format('embedded-opentype'),
+           url('./fontello.woff?15936540') format('woff'),
+           url('./fontello.ttf?15936540') format('truetype'),
+           url('./fontello.svg?15936540#fontello') format('svg');
+      font-weight: normal;
+      font-style: normal;
+    }
+     
+     
+    .demo-icon
+    {
+      font-family: "fontello";
+      font-style: normal;
+      font-weight: normal;
+     
+      display: inline-block;
+      text-decoration: inherit;
+      width: 1em;
+      margin-right: .2em;
+      text-align: center;
+      /* opacity: .8; */
+     
+      /* For safety - reset parent styles, that can break glyph codes*/
+      font-variant: normal;
+      text-transform: none;
+     
+      /* fix buttons height, for twitter bootstrap */
+      line-height: 1em;
+     
+      /* Animation center compensation - margins should be symmetric */
+      /* remove if not needed */
+      margin-left: .2em;
+     
+      /* You can be more comfortable with increased icons size */
+      /* font-size: 120%; */
+     
+      /* Font smoothing. That was taken from TWBS */
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+     
+      /* Uncomment for 3D effect */
+      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+    }
+     </style>
+    <script>
+      function toggleCodes(on) {
+        var obj = document.getElementById('icons');
+      
+        if (on) {
+          obj.className += ' codesOn';
+        } else {
+          obj.className = obj.className.replace(' codesOn', '');
+        }
+      }
+      
+    </script>
+  </head>
+  <body>
+    <div class="container header">
+      <h1>
+        Icons
+      </h1>
+      <label class="switch">
+        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
+      </label>
+    </div>
+    <div id="icons" class="container">
+      <div class="row">
+        <div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-palette">&#xe800;</i> <span class="i-name">icon-palette</span><span class="i-code">0xe800</span></div>
+        <div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-search">&#xe803;</i> <span class="i-name">icon-search</span><span class="i-code">0xe803</span></div>
+        <div title="Code: 0xe804" class="the-icons span3"><i class="demo-icon icon-flashlight">&#xe804;</i> <span class="i-name">icon-flashlight</span><span class="i-code">0xe804</span></div>
+        <div title="Code: 0xe805" class="the-icons span3"><i class="demo-icon icon-mail">&#xe805;</i> <span class="i-name">icon-mail</span><span class="i-code">0xe805</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe806" class="the-icons span3"><i class="demo-icon icon-heart">&#xe806;</i> <span class="i-name">icon-heart</span><span class="i-code">0xe806</span></div>
+        <div title="Code: 0xe807" class="the-icons span3"><i class="demo-icon icon-heart-empty">&#xe807;</i> <span class="i-name">icon-heart-empty</span><span class="i-code">0xe807</span></div>
+        <div title="Code: 0xe808" class="the-icons span3"><i class="demo-icon icon-star">&#xe808;</i> <span class="i-name">icon-star</span><span class="i-code">0xe808</span></div>
+        <div title="Code: 0xe809" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe809;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe809</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe80a" class="the-icons span3"><i class="demo-icon icon-user">&#xe80a;</i> <span class="i-name">icon-user</span><span class="i-code">0xe80a</span></div>
+        <div title="Code: 0xe80b" class="the-icons span3"><i class="demo-icon icon-users">&#xe80b;</i> <span class="i-name">icon-users</span><span class="i-code">0xe80b</span></div>
+        <div title="Code: 0xe80c" class="the-icons span3"><i class="demo-icon icon-user-add">&#xe80c;</i> <span class="i-name">icon-user-add</span><span class="i-code">0xe80c</span></div>
+        <div title="Code: 0xe80d" class="the-icons span3"><i class="demo-icon icon-video">&#xe80d;</i> <span class="i-name">icon-video</span><span class="i-code">0xe80d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe80e" class="the-icons span3"><i class="demo-icon icon-picture">&#xe80e;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe80e</span></div>
+        <div title="Code: 0xe80f" class="the-icons span3"><i class="demo-icon icon-camera">&#xe80f;</i> <span class="i-name">icon-camera</span><span class="i-code">0xe80f</span></div>
+        <div title="Code: 0xe810" class="the-icons span3"><i class="demo-icon icon-layout">&#xe810;</i> <span class="i-name">icon-layout</span><span class="i-code">0xe810</span></div>
+        <div title="Code: 0xe811" class="the-icons span3"><i class="demo-icon icon-menu">&#xe811;</i> <span class="i-name">icon-menu</span><span class="i-code">0xe811</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe812" class="the-icons span3"><i class="demo-icon icon-check">&#xe812;</i> <span class="i-name">icon-check</span><span class="i-code">0xe812</span></div>
+        <div title="Code: 0xe813" class="the-icons span3"><i class="demo-icon icon-cancel">&#xe813;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe813</span></div>
+        <div title="Code: 0xe814" class="the-icons span3"><i class="demo-icon icon-cancel-circled">&#xe814;</i> <span class="i-name">icon-cancel-circled</span><span class="i-code">0xe814</span></div>
+        <div title="Code: 0xe815" class="the-icons span3"><i class="demo-icon icon-cancel-squared">&#xe815;</i> <span class="i-name">icon-cancel-squared</span><span class="i-code">0xe815</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe816" class="the-icons span3"><i class="demo-icon icon-plus">&#xe816;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe816</span></div>
+        <div title="Code: 0xe817" class="the-icons span3"><i class="demo-icon icon-plus-circled">&#xe817;</i> <span class="i-name">icon-plus-circled</span><span class="i-code">0xe817</span></div>
+        <div title="Code: 0xe818" class="the-icons span3"><i class="demo-icon icon-plus-squared">&#xe818;</i> <span class="i-name">icon-plus-squared</span><span class="i-code">0xe818</span></div>
+        <div title="Code: 0xe819" class="the-icons span3"><i class="demo-icon icon-minus">&#xe819;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe819</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe81a" class="the-icons span3"><i class="demo-icon icon-minus-circled">&#xe81a;</i> <span class="i-name">icon-minus-circled</span><span class="i-code">0xe81a</span></div>
+        <div title="Code: 0xe81b" class="the-icons span3"><i class="demo-icon icon-minus-squared">&#xe81b;</i> <span class="i-name">icon-minus-squared</span><span class="i-code">0xe81b</span></div>
+        <div title="Code: 0xe81c" class="the-icons span3"><i class="demo-icon icon-help">&#xe81c;</i> <span class="i-name">icon-help</span><span class="i-code">0xe81c</span></div>
+        <div title="Code: 0xe81d" class="the-icons span3"><i class="demo-icon icon-help-circled">&#xe81d;</i> <span class="i-name">icon-help-circled</span><span class="i-code">0xe81d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe81e" class="the-icons span3"><i class="demo-icon icon-info">&#xe81e;</i> <span class="i-name">icon-info</span><span class="i-code">0xe81e</span></div>
+        <div title="Code: 0xe81f" class="the-icons span3"><i class="demo-icon icon-info-circled">&#xe81f;</i> <span class="i-name">icon-info-circled</span><span class="i-code">0xe81f</span></div>
+        <div title="Code: 0xe820" class="the-icons span3"><i class="demo-icon icon-back">&#xe820;</i> <span class="i-name">icon-back</span><span class="i-code">0xe820</span></div>
+        <div title="Code: 0xe821" class="the-icons span3"><i class="demo-icon icon-home">&#xe821;</i> <span class="i-name">icon-home</span><span class="i-code">0xe821</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe822" class="the-icons span3"><i class="demo-icon icon-link">&#xe822;</i> <span class="i-name">icon-link</span><span class="i-code">0xe822</span></div>
+        <div title="Code: 0xe823" class="the-icons span3"><i class="demo-icon icon-attach">&#xe823;</i> <span class="i-name">icon-attach</span><span class="i-code">0xe823</span></div>
+        <div title="Code: 0xe824" class="the-icons span3"><i class="demo-icon icon-lock">&#xe824;</i> <span class="i-name">icon-lock</span><span class="i-code">0xe824</span></div>
+        <div title="Code: 0xe825" class="the-icons span3"><i class="demo-icon icon-lock-open">&#xe825;</i> <span class="i-name">icon-lock-open</span><span class="i-code">0xe825</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe826" class="the-icons span3"><i class="demo-icon icon-eye">&#xe826;</i> <span class="i-name">icon-eye</span><span class="i-code">0xe826</span></div>
+        <div title="Code: 0xe827" class="the-icons span3"><i class="demo-icon icon-tag">&#xe827;</i> <span class="i-name">icon-tag</span><span class="i-code">0xe827</span></div>
+        <div title="Code: 0xe828" class="the-icons span3"><i class="demo-icon icon-bookmark">&#xe828;</i> <span class="i-name">icon-bookmark</span><span class="i-code">0xe828</span></div>
+        <div title="Code: 0xe829" class="the-icons span3"><i class="demo-icon icon-bookmarks">&#xe829;</i> <span class="i-name">icon-bookmarks</span><span class="i-code">0xe829</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe82a" class="the-icons span3"><i class="demo-icon icon-flag">&#xe82a;</i> <span class="i-name">icon-flag</span><span class="i-code">0xe82a</span></div>
+        <div title="Code: 0xe82b" class="the-icons span3"><i class="demo-icon icon-thumbs-up">&#xe82b;</i> <span class="i-name">icon-thumbs-up</span><span class="i-code">0xe82b</span></div>
+        <div title="Code: 0xe82c" class="the-icons span3"><i class="demo-icon icon-thumbs-down">&#xe82c;</i> <span class="i-name">icon-thumbs-down</span><span class="i-code">0xe82c</span></div>
+        <div title="Code: 0xe82d" class="the-icons span3"><i class="demo-icon icon-download">&#xe82d;</i> <span class="i-name">icon-download</span><span class="i-code">0xe82d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe82e" class="the-icons span3"><i class="demo-icon icon-upload">&#xe82e;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe82e</span></div>
+        <div title="Code: 0xe82f" class="the-icons span3"><i class="demo-icon icon-upload-cloud">&#xe82f;</i> <span class="i-name">icon-upload-cloud</span><span class="i-code">0xe82f</span></div>
+        <div title="Code: 0xe830" class="the-icons span3"><i class="demo-icon icon-reply">&#xe830;</i> <span class="i-name">icon-reply</span><span class="i-code">0xe830</span></div>
+        <div title="Code: 0xe831" class="the-icons span3"><i class="demo-icon icon-reply-all">&#xe831;</i> <span class="i-name">icon-reply-all</span><span class="i-code">0xe831</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe832" class="the-icons span3"><i class="demo-icon icon-forward">&#xe832;</i> <span class="i-name">icon-forward</span><span class="i-code">0xe832</span></div>
+        <div title="Code: 0xe833" class="the-icons span3"><i class="demo-icon icon-quote">&#xe833;</i> <span class="i-name">icon-quote</span><span class="i-code">0xe833</span></div>
+        <div title="Code: 0xe834" class="the-icons span3"><i class="demo-icon icon-code">&#xe834;</i> <span class="i-name">icon-code</span><span class="i-code">0xe834</span></div>
+        <div title="Code: 0xe835" class="the-icons span3"><i class="demo-icon icon-export">&#xe835;</i> <span class="i-name">icon-export</span><span class="i-code">0xe835</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe836" class="the-icons span3"><i class="demo-icon icon-pencil">&#xe836;</i> <span class="i-name">icon-pencil</span><span class="i-code">0xe836</span></div>
+        <div title="Code: 0xe837" class="the-icons span3"><i class="demo-icon icon-feather">&#xe837;</i> <span class="i-name">icon-feather</span><span class="i-code">0xe837</span></div>
+        <div title="Code: 0xe838" class="the-icons span3"><i class="demo-icon icon-print">&#xe838;</i> <span class="i-name">icon-print</span><span class="i-code">0xe838</span></div>
+        <div title="Code: 0xe839" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe839;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe839</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe83a" class="the-icons span3"><i class="demo-icon icon-keyboard">&#xe83a;</i> <span class="i-name">icon-keyboard</span><span class="i-code">0xe83a</span></div>
+        <div title="Code: 0xe83b" class="the-icons span3"><i class="demo-icon icon-comment">&#xe83b;</i> <span class="i-name">icon-comment</span><span class="i-code">0xe83b</span></div>
+        <div title="Code: 0xe83c" class="the-icons span3"><i class="demo-icon icon-chat">&#xe83c;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe83c</span></div>
+        <div title="Code: 0xe83d" class="the-icons span3"><i class="demo-icon icon-bell">&#xe83d;</i> <span class="i-name">icon-bell</span><span class="i-code">0xe83d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe83e" class="the-icons span3"><i class="demo-icon icon-attention">&#xe83e;</i> <span class="i-name">icon-attention</span><span class="i-code">0xe83e</span></div>
+        <div title="Code: 0xe83f" class="the-icons span3"><i class="demo-icon icon-alert">&#xe83f;</i> <span class="i-name">icon-alert</span><span class="i-code">0xe83f</span></div>
+        <div title="Code: 0xe840" class="the-icons span3"><i class="demo-icon icon-vcard">&#xe840;</i> <span class="i-name">icon-vcard</span><span class="i-code">0xe840</span></div>
+        <div title="Code: 0xe841" class="the-icons span3"><i class="demo-icon icon-address">&#xe841;</i> <span class="i-name">icon-address</span><span class="i-code">0xe841</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe842" class="the-icons span3"><i class="demo-icon icon-location">&#xe842;</i> <span class="i-name">icon-location</span><span class="i-code">0xe842</span></div>
+        <div title="Code: 0xe843" class="the-icons span3"><i class="demo-icon icon-map">&#xe843;</i> <span class="i-name">icon-map</span><span class="i-code">0xe843</span></div>
+        <div title="Code: 0xe844" class="the-icons span3"><i class="demo-icon icon-direction">&#xe844;</i> <span class="i-name">icon-direction</span><span class="i-code">0xe844</span></div>
+        <div title="Code: 0xe845" class="the-icons span3"><i class="demo-icon icon-compass">&#xe845;</i> <span class="i-name">icon-compass</span><span class="i-code">0xe845</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe846" class="the-icons span3"><i class="demo-icon icon-cup">&#xe846;</i> <span class="i-name">icon-cup</span><span class="i-code">0xe846</span></div>
+        <div title="Code: 0xe847" class="the-icons span3"><i class="demo-icon icon-trash">&#xe847;</i> <span class="i-name">icon-trash</span><span class="i-code">0xe847</span></div>
+        <div title="Code: 0xe848" class="the-icons span3"><i class="demo-icon icon-doc">&#xe848;</i> <span class="i-name">icon-doc</span><span class="i-code">0xe848</span></div>
+        <div title="Code: 0xe849" class="the-icons span3"><i class="demo-icon icon-docs">&#xe849;</i> <span class="i-name">icon-docs</span><span class="i-code">0xe849</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe84a" class="the-icons span3"><i class="demo-icon icon-doc-landscape">&#xe84a;</i> <span class="i-name">icon-doc-landscape</span><span class="i-code">0xe84a</span></div>
+        <div title="Code: 0xe84b" class="the-icons span3"><i class="demo-icon icon-doc-text">&#xe84b;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0xe84b</span></div>
+        <div title="Code: 0xe84c" class="the-icons span3"><i class="demo-icon icon-doc-text-inv">&#xe84c;</i> <span class="i-name">icon-doc-text-inv</span><span class="i-code">0xe84c</span></div>
+        <div title="Code: 0xe84d" class="the-icons span3"><i class="demo-icon icon-newspaper">&#xe84d;</i> <span class="i-name">icon-newspaper</span><span class="i-code">0xe84d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe84e" class="the-icons span3"><i class="demo-icon icon-book-open">&#xe84e;</i> <span class="i-name">icon-book-open</span><span class="i-code">0xe84e</span></div>
+        <div title="Code: 0xe84f" class="the-icons span3"><i class="demo-icon icon-book">&#xe84f;</i> <span class="i-name">icon-book</span><span class="i-code">0xe84f</span></div>
+        <div title="Code: 0xe850" class="the-icons span3"><i class="demo-icon icon-folder">&#xe850;</i> <span class="i-name">icon-folder</span><span class="i-code">0xe850</span></div>
+        <div title="Code: 0xe851" class="the-icons span3"><i class="demo-icon icon-archive">&#xe851;</i> <span class="i-name">icon-archive</span><span class="i-code">0xe851</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe852" class="the-icons span3"><i class="demo-icon icon-box">&#xe852;</i> <span class="i-name">icon-box</span><span class="i-code">0xe852</span></div>
+        <div title="Code: 0xe853" class="the-icons span3"><i class="demo-icon icon-rss">&#xe853;</i> <span class="i-name">icon-rss</span><span class="i-code">0xe853</span></div>
+        <div title="Code: 0xe854" class="the-icons span3"><i class="demo-icon icon-phone">&#xe854;</i> <span class="i-name">icon-phone</span><span class="i-code">0xe854</span></div>
+        <div title="Code: 0xe855" class="the-icons span3"><i class="demo-icon icon-cog">&#xe855;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe855</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe856" class="the-icons span3"><i class="demo-icon icon-tools">&#xe856;</i> <span class="i-name">icon-tools</span><span class="i-code">0xe856</span></div>
+        <div title="Code: 0xe857" class="the-icons span3"><i class="demo-icon icon-share">&#xe857;</i> <span class="i-name">icon-share</span><span class="i-code">0xe857</span></div>
+        <div title="Code: 0xe858" class="the-icons span3"><i class="demo-icon icon-shareable">&#xe858;</i> <span class="i-name">icon-shareable</span><span class="i-code">0xe858</span></div>
+        <div title="Code: 0xe859" class="the-icons span3"><i class="demo-icon icon-basket">&#xe859;</i> <span class="i-name">icon-basket</span><span class="i-code">0xe859</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe85a" class="the-icons span3"><i class="demo-icon icon-bag">&#xe85a;</i> <span class="i-name">icon-bag</span><span class="i-code">0xe85a</span></div>
+        <div title="Code: 0xe85b" class="the-icons span3"><i class="demo-icon icon-calendar">&#xe85b;</i> <span class="i-name">icon-calendar</span><span class="i-code">0xe85b</span></div>
+        <div title="Code: 0xe85c" class="the-icons span3"><i class="demo-icon icon-login">&#xe85c;</i> <span class="i-name">icon-login</span><span class="i-code">0xe85c</span></div>
+        <div title="Code: 0xe85d" class="the-icons span3"><i class="demo-icon icon-logout">&#xe85d;</i> <span class="i-name">icon-logout</span><span class="i-code">0xe85d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe85e" class="the-icons span3"><i class="demo-icon icon-mic">&#xe85e;</i> <span class="i-name">icon-mic</span><span class="i-code">0xe85e</span></div>
+        <div title="Code: 0xe85f" class="the-icons span3"><i class="demo-icon icon-mute">&#xe85f;</i> <span class="i-name">icon-mute</span><span class="i-code">0xe85f</span></div>
+        <div title="Code: 0xe860" class="the-icons span3"><i class="demo-icon icon-sound">&#xe860;</i> <span class="i-name">icon-sound</span><span class="i-code">0xe860</span></div>
+        <div title="Code: 0xe861" class="the-icons span3"><i class="demo-icon icon-volume">&#xe861;</i> <span class="i-name">icon-volume</span><span class="i-code">0xe861</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe862" class="the-icons span3"><i class="demo-icon icon-clock">&#xe862;</i> <span class="i-name">icon-clock</span><span class="i-code">0xe862</span></div>
+        <div title="Code: 0xe863" class="the-icons span3"><i class="demo-icon icon-hourglass">&#xe863;</i> <span class="i-name">icon-hourglass</span><span class="i-code">0xe863</span></div>
+        <div title="Code: 0xe864" class="the-icons span3"><i class="demo-icon icon-lamp">&#xe864;</i> <span class="i-name">icon-lamp</span><span class="i-code">0xe864</span></div>
+        <div title="Code: 0xe865" class="the-icons span3"><i class="demo-icon icon-light-down">&#xe865;</i> <span class="i-name">icon-light-down</span><span class="i-code">0xe865</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe866" class="the-icons span3"><i class="demo-icon icon-light-up">&#xe866;</i> <span class="i-name">icon-light-up</span><span class="i-code">0xe866</span></div>
+        <div title="Code: 0xe867" class="the-icons span3"><i class="demo-icon icon-adjust">&#xe867;</i> <span class="i-name">icon-adjust</span><span class="i-code">0xe867</span></div>
+        <div title="Code: 0xe868" class="the-icons span3"><i class="demo-icon icon-block">&#xe868;</i> <span class="i-name">icon-block</span><span class="i-code">0xe868</span></div>
+        <div title="Code: 0xe869" class="the-icons span3"><i class="demo-icon icon-resize-full">&#xe869;</i> <span class="i-name">icon-resize-full</span><span class="i-code">0xe869</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe86a" class="the-icons span3"><i class="demo-icon icon-resize-small">&#xe86a;</i> <span class="i-name">icon-resize-small</span><span class="i-code">0xe86a</span></div>
+        <div title="Code: 0xe86b" class="the-icons span3"><i class="demo-icon icon-popup">&#xe86b;</i> <span class="i-name">icon-popup</span><span class="i-code">0xe86b</span></div>
+        <div title="Code: 0xe86c" class="the-icons span3"><i class="demo-icon icon-publish">&#xe86c;</i> <span class="i-name">icon-publish</span><span class="i-code">0xe86c</span></div>
+        <div title="Code: 0xe86d" class="the-icons span3"><i class="demo-icon icon-window">&#xe86d;</i> <span class="i-name">icon-window</span><span class="i-code">0xe86d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe86e" class="the-icons span3"><i class="demo-icon icon-arrow-combo">&#xe86e;</i> <span class="i-name">icon-arrow-combo</span><span class="i-code">0xe86e</span></div>
+        <div title="Code: 0xe86f" class="the-icons span3"><i class="demo-icon icon-down-circled">&#xe86f;</i> <span class="i-name">icon-down-circled</span><span class="i-code">0xe86f</span></div>
+        <div title="Code: 0xe870" class="the-icons span3"><i class="demo-icon icon-left-circled">&#xe870;</i> <span class="i-name">icon-left-circled</span><span class="i-code">0xe870</span></div>
+        <div title="Code: 0xe871" class="the-icons span3"><i class="demo-icon icon-right-circled">&#xe871;</i> <span class="i-name">icon-right-circled</span><span class="i-code">0xe871</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe872" class="the-icons span3"><i class="demo-icon icon-up-circled">&#xe872;</i> <span class="i-name">icon-up-circled</span><span class="i-code">0xe872</span></div>
+        <div title="Code: 0xe873" class="the-icons span3"><i class="demo-icon icon-down-open">&#xe873;</i> <span class="i-name">icon-down-open</span><span class="i-code">0xe873</span></div>
+        <div title="Code: 0xe874" class="the-icons span3"><i class="demo-icon icon-left-open">&#xe874;</i> <span class="i-name">icon-left-open</span><span class="i-code">0xe874</span></div>
+        <div title="Code: 0xe875" class="the-icons span3"><i class="demo-icon icon-right-open">&#xe875;</i> <span class="i-name">icon-right-open</span><span class="i-code">0xe875</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe876" class="the-icons span3"><i class="demo-icon icon-up-open">&#xe876;</i> <span class="i-name">icon-up-open</span><span class="i-code">0xe876</span></div>
+        <div title="Code: 0xe877" class="the-icons span3"><i class="demo-icon icon-down-open-mini">&#xe877;</i> <span class="i-name">icon-down-open-mini</span><span class="i-code">0xe877</span></div>
+        <div title="Code: 0xe878" class="the-icons span3"><i class="demo-icon icon-left-open-mini">&#xe878;</i> <span class="i-name">icon-left-open-mini</span><span class="i-code">0xe878</span></div>
+        <div title="Code: 0xe879" class="the-icons span3"><i class="demo-icon icon-right-open-mini">&#xe879;</i> <span class="i-name">icon-right-open-mini</span><span class="i-code">0xe879</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe87a" class="the-icons span3"><i class="demo-icon icon-up-open-mini">&#xe87a;</i> <span class="i-name">icon-up-open-mini</span><span class="i-code">0xe87a</span></div>
+        <div title="Code: 0xe87b" class="the-icons span3"><i class="demo-icon icon-down-open-big">&#xe87b;</i> <span class="i-name">icon-down-open-big</span><span class="i-code">0xe87b</span></div>
+        <div title="Code: 0xe87c" class="the-icons span3"><i class="demo-icon icon-left-open-big">&#xe87c;</i> <span class="i-name">icon-left-open-big</span><span class="i-code">0xe87c</span></div>
+        <div title="Code: 0xe87d" class="the-icons span3"><i class="demo-icon icon-right-open-big">&#xe87d;</i> <span class="i-name">icon-right-open-big</span><span class="i-code">0xe87d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe87e" class="the-icons span3"><i class="demo-icon icon-up-open-big">&#xe87e;</i> <span class="i-name">icon-up-open-big</span><span class="i-code">0xe87e</span></div>
+        <div title="Code: 0xe87f" class="the-icons span3"><i class="demo-icon icon-down">&#xe87f;</i> <span class="i-name">icon-down</span><span class="i-code">0xe87f</span></div>
+        <div title="Code: 0xe880" class="the-icons span3"><i class="demo-icon icon-left">&#xe880;</i> <span class="i-name">icon-left</span><span class="i-code">0xe880</span></div>
+        <div title="Code: 0xe881" class="the-icons span3"><i class="demo-icon icon-right">&#xe881;</i> <span class="i-name">icon-right</span><span class="i-code">0xe881</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe882" class="the-icons span3"><i class="demo-icon icon-up">&#xe882;</i> <span class="i-name">icon-up</span><span class="i-code">0xe882</span></div>
+        <div title="Code: 0xe883" class="the-icons span3"><i class="demo-icon icon-down-dir">&#xe883;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0xe883</span></div>
+        <div title="Code: 0xe884" class="the-icons span3"><i class="demo-icon icon-left-dir">&#xe884;</i> <span class="i-name">icon-left-dir</span><span class="i-code">0xe884</span></div>
+        <div title="Code: 0xe885" class="the-icons span3"><i class="demo-icon icon-right-dir">&#xe885;</i> <span class="i-name">icon-right-dir</span><span class="i-code">0xe885</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe886" class="the-icons span3"><i class="demo-icon icon-up-dir">&#xe886;</i> <span class="i-name">icon-up-dir</span><span class="i-code">0xe886</span></div>
+        <div title="Code: 0xe887" class="the-icons span3"><i class="demo-icon icon-down-bold">&#xe887;</i> <span class="i-name">icon-down-bold</span><span class="i-code">0xe887</span></div>
+        <div title="Code: 0xe888" class="the-icons span3"><i class="demo-icon icon-left-bold">&#xe888;</i> <span class="i-name">icon-left-bold</span><span class="i-code">0xe888</span></div>
+        <div title="Code: 0xe889" class="the-icons span3"><i class="demo-icon icon-right-bold">&#xe889;</i> <span class="i-name">icon-right-bold</span><span class="i-code">0xe889</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe88a" class="the-icons span3"><i class="demo-icon icon-up-bold">&#xe88a;</i> <span class="i-name">icon-up-bold</span><span class="i-code">0xe88a</span></div>
+        <div title="Code: 0xe88b" class="the-icons span3"><i class="demo-icon icon-down-thin">&#xe88b;</i> <span class="i-name">icon-down-thin</span><span class="i-code">0xe88b</span></div>
+        <div title="Code: 0xe88c" class="the-icons span3"><i class="demo-icon icon-left-thin">&#xe88c;</i> <span class="i-name">icon-left-thin</span><span class="i-code">0xe88c</span></div>
+        <div title="Code: 0xe88d" class="the-icons span3"><i class="demo-icon icon-right-thin">&#xe88d;</i> <span class="i-name">icon-right-thin</span><span class="i-code">0xe88d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe88e" class="the-icons span3"><i class="demo-icon icon-up-thin">&#xe88e;</i> <span class="i-name">icon-up-thin</span><span class="i-code">0xe88e</span></div>
+        <div title="Code: 0xe88f" class="the-icons span3"><i class="demo-icon icon-ccw">&#xe88f;</i> <span class="i-name">icon-ccw</span><span class="i-code">0xe88f</span></div>
+        <div title="Code: 0xe890" class="the-icons span3"><i class="demo-icon icon-cw">&#xe890;</i> <span class="i-name">icon-cw</span><span class="i-code">0xe890</span></div>
+        <div title="Code: 0xe891" class="the-icons span3"><i class="demo-icon icon-arrows-ccw">&#xe891;</i> <span class="i-name">icon-arrows-ccw</span><span class="i-code">0xe891</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe892" class="the-icons span3"><i class="demo-icon icon-level-down">&#xe892;</i> <span class="i-name">icon-level-down</span><span class="i-code">0xe892</span></div>
+        <div title="Code: 0xe893" class="the-icons span3"><i class="demo-icon icon-level-up">&#xe893;</i> <span class="i-name">icon-level-up</span><span class="i-code">0xe893</span></div>
+        <div title="Code: 0xe894" class="the-icons span3"><i class="demo-icon icon-shuffle">&#xe894;</i> <span class="i-name">icon-shuffle</span><span class="i-code">0xe894</span></div>
+        <div title="Code: 0xe895" class="the-icons span3"><i class="demo-icon icon-loop">&#xe895;</i> <span class="i-name">icon-loop</span><span class="i-code">0xe895</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe896" class="the-icons span3"><i class="demo-icon icon-switch">&#xe896;</i> <span class="i-name">icon-switch</span><span class="i-code">0xe896</span></div>
+        <div title="Code: 0xe897" class="the-icons span3"><i class="demo-icon icon-play">&#xe897;</i> <span class="i-name">icon-play</span><span class="i-code">0xe897</span></div>
+        <div title="Code: 0xe898" class="the-icons span3"><i class="demo-icon icon-stop">&#xe898;</i> <span class="i-name">icon-stop</span><span class="i-code">0xe898</span></div>
+        <div title="Code: 0xe899" class="the-icons span3"><i class="demo-icon icon-pause">&#xe899;</i> <span class="i-name">icon-pause</span><span class="i-code">0xe899</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe89a" class="the-icons span3"><i class="demo-icon icon-record">&#xe89a;</i> <span class="i-name">icon-record</span><span class="i-code">0xe89a</span></div>
+        <div title="Code: 0xe89b" class="the-icons span3"><i class="demo-icon icon-to-end">&#xe89b;</i> <span class="i-name">icon-to-end</span><span class="i-code">0xe89b</span></div>
+        <div title="Code: 0xe89c" class="the-icons span3"><i class="demo-icon icon-to-start">&#xe89c;</i> <span class="i-name">icon-to-start</span><span class="i-code">0xe89c</span></div>
+        <div title="Code: 0xe89d" class="the-icons span3"><i class="demo-icon icon-fast-forward">&#xe89d;</i> <span class="i-name">icon-fast-forward</span><span class="i-code">0xe89d</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe89e" class="the-icons span3"><i class="demo-icon icon-fast-backward">&#xe89e;</i> <span class="i-name">icon-fast-backward</span><span class="i-code">0xe89e</span></div>
+        <div title="Code: 0xe89f" class="the-icons span3"><i class="demo-icon icon-progress-0">&#xe89f;</i> <span class="i-name">icon-progress-0</span><span class="i-code">0xe89f</span></div>
+        <div title="Code: 0xe8a0" class="the-icons span3"><i class="demo-icon icon-progress-1">&#xe8a0;</i> <span class="i-name">icon-progress-1</span><span class="i-code">0xe8a0</span></div>
+        <div title="Code: 0xe8a1" class="the-icons span3"><i class="demo-icon icon-progress-2">&#xe8a1;</i> <span class="i-name">icon-progress-2</span><span class="i-code">0xe8a1</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8a2" class="the-icons span3"><i class="demo-icon icon-progress-3">&#xe8a2;</i> <span class="i-name">icon-progress-3</span><span class="i-code">0xe8a2</span></div>
+        <div title="Code: 0xe8a3" class="the-icons span3"><i class="demo-icon icon-target">&#xe8a3;</i> <span class="i-name">icon-target</span><span class="i-code">0xe8a3</span></div>
+        <div title="Code: 0xe8a5" class="the-icons span3"><i class="demo-icon icon-list">&#xe8a5;</i> <span class="i-name">icon-list</span><span class="i-code">0xe8a5</span></div>
+        <div title="Code: 0xe8a6" class="the-icons span3"><i class="demo-icon icon-list-add">&#xe8a6;</i> <span class="i-name">icon-list-add</span><span class="i-code">0xe8a6</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8a9" class="the-icons span3"><i class="demo-icon icon-battery">&#xe8a9;</i> <span class="i-name">icon-battery</span><span class="i-code">0xe8a9</span></div>
+        <div title="Code: 0xe8aa" class="the-icons span3"><i class="demo-icon icon-back-in-time">&#xe8aa;</i> <span class="i-name">icon-back-in-time</span><span class="i-code">0xe8aa</span></div>
+        <div title="Code: 0xe8ab" class="the-icons span3"><i class="demo-icon icon-monitor">&#xe8ab;</i> <span class="i-name">icon-monitor</span><span class="i-code">0xe8ab</span></div>
+        <div title="Code: 0xe8ac" class="the-icons span3"><i class="demo-icon icon-mobile">&#xe8ac;</i> <span class="i-name">icon-mobile</span><span class="i-code">0xe8ac</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8ae" class="the-icons span3"><i class="demo-icon icon-cd">&#xe8ae;</i> <span class="i-name">icon-cd</span><span class="i-code">0xe8ae</span></div>
+        <div title="Code: 0xe8af" class="the-icons span3"><i class="demo-icon icon-inbox">&#xe8af;</i> <span class="i-name">icon-inbox</span><span class="i-code">0xe8af</span></div>
+        <div title="Code: 0xe8b0" class="the-icons span3"><i class="demo-icon icon-install">&#xe8b0;</i> <span class="i-name">icon-install</span><span class="i-code">0xe8b0</span></div>
+        <div title="Code: 0xe8b1" class="the-icons span3"><i class="demo-icon icon-globe">&#xe8b1;</i> <span class="i-name">icon-globe</span><span class="i-code">0xe8b1</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8b2" class="the-icons span3"><i class="demo-icon icon-cloud">&#xe8b2;</i> <span class="i-name">icon-cloud</span><span class="i-code">0xe8b2</span></div>
+        <div title="Code: 0xe8b3" class="the-icons span3"><i class="demo-icon icon-cloud-thunder">&#xe8b3;</i> <span class="i-name">icon-cloud-thunder</span><span class="i-code">0xe8b3</span></div>
+        <div title="Code: 0xe8b4" class="the-icons span3"><i class="demo-icon icon-flash">&#xe8b4;</i> <span class="i-name">icon-flash</span><span class="i-code">0xe8b4</span></div>
+        <div title="Code: 0xe8b5" class="the-icons span3"><i class="demo-icon icon-moon">&#xe8b5;</i> <span class="i-name">icon-moon</span><span class="i-code">0xe8b5</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8b6" class="the-icons span3"><i class="demo-icon icon-flight">&#xe8b6;</i> <span class="i-name">icon-flight</span><span class="i-code">0xe8b6</span></div>
+        <div title="Code: 0xe8b7" class="the-icons span3"><i class="demo-icon icon-paper-plane">&#xe8b7;</i> <span class="i-name">icon-paper-plane</span><span class="i-code">0xe8b7</span></div>
+        <div title="Code: 0xe8b8" class="the-icons span3"><i class="demo-icon icon-leaf">&#xe8b8;</i> <span class="i-name">icon-leaf</span><span class="i-code">0xe8b8</span></div>
+        <div title="Code: 0xe8b9" class="the-icons span3"><i class="demo-icon icon-lifebuoy">&#xe8b9;</i> <span class="i-name">icon-lifebuoy</span><span class="i-code">0xe8b9</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8ba" class="the-icons span3"><i class="demo-icon icon-mouse">&#xe8ba;</i> <span class="i-name">icon-mouse</span><span class="i-code">0xe8ba</span></div>
+        <div title="Code: 0xe8bb" class="the-icons span3"><i class="demo-icon icon-briefcase">&#xe8bb;</i> <span class="i-name">icon-briefcase</span><span class="i-code">0xe8bb</span></div>
+        <div title="Code: 0xe8bc" class="the-icons span3"><i class="demo-icon icon-suitcase">&#xe8bc;</i> <span class="i-name">icon-suitcase</span><span class="i-code">0xe8bc</span></div>
+        <div title="Code: 0xe8bd" class="the-icons span3"><i class="demo-icon icon-dot">&#xe8bd;</i> <span class="i-name">icon-dot</span><span class="i-code">0xe8bd</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8be" class="the-icons span3"><i class="demo-icon icon-dot-2">&#xe8be;</i> <span class="i-name">icon-dot-2</span><span class="i-code">0xe8be</span></div>
+        <div title="Code: 0xe8bf" class="the-icons span3"><i class="demo-icon icon-dot-3">&#xe8bf;</i> <span class="i-name">icon-dot-3</span><span class="i-code">0xe8bf</span></div>
+        <div title="Code: 0xe8c0" class="the-icons span3"><i class="demo-icon icon-brush">&#xe8c0;</i> <span class="i-name">icon-brush</span><span class="i-code">0xe8c0</span></div>
+        <div title="Code: 0xe8c2" class="the-icons span3"><i class="demo-icon icon-infinity">&#xe8c2;</i> <span class="i-name">icon-infinity</span><span class="i-code">0xe8c2</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8c3" class="the-icons span3"><i class="demo-icon icon-erase">&#xe8c3;</i> <span class="i-name">icon-erase</span><span class="i-code">0xe8c3</span></div>
+        <div title="Code: 0xe8c4" class="the-icons span3"><i class="demo-icon icon-chart-pie">&#xe8c4;</i> <span class="i-name">icon-chart-pie</span><span class="i-code">0xe8c4</span></div>
+        <div title="Code: 0xe8c5" class="the-icons span3"><i class="demo-icon icon-chart-line">&#xe8c5;</i> <span class="i-name">icon-chart-line</span><span class="i-code">0xe8c5</span></div>
+        <div title="Code: 0xe8c6" class="the-icons span3"><i class="demo-icon icon-chart-bar">&#xe8c6;</i> <span class="i-name">icon-chart-bar</span><span class="i-code">0xe8c6</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8c7" class="the-icons span3"><i class="demo-icon icon-chart-area">&#xe8c7;</i> <span class="i-name">icon-chart-area</span><span class="i-code">0xe8c7</span></div>
+        <div title="Code: 0xe8c8" class="the-icons span3"><i class="demo-icon icon-tape">&#xe8c8;</i> <span class="i-name">icon-tape</span><span class="i-code">0xe8c8</span></div>
+        <div title="Code: 0xe8c9" class="the-icons span3"><i class="demo-icon icon-graduation-cap">&#xe8c9;</i> <span class="i-name">icon-graduation-cap</span><span class="i-code">0xe8c9</span></div>
+        <div title="Code: 0xe8ca" class="the-icons span3"><i class="demo-icon icon-language">&#xe8ca;</i> <span class="i-name">icon-language</span><span class="i-code">0xe8ca</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8cb" class="the-icons span3"><i class="demo-icon icon-ticket">&#xe8cb;</i> <span class="i-name">icon-ticket</span><span class="i-code">0xe8cb</span></div>
+        <div title="Code: 0xe8cc" class="the-icons span3"><i class="demo-icon icon-water">&#xe8cc;</i> <span class="i-name">icon-water</span><span class="i-code">0xe8cc</span></div>
+        <div title="Code: 0xe8cd" class="the-icons span3"><i class="demo-icon icon-droplet">&#xe8cd;</i> <span class="i-name">icon-droplet</span><span class="i-code">0xe8cd</span></div>
+        <div title="Code: 0xe8ce" class="the-icons span3"><i class="demo-icon icon-air">&#xe8ce;</i> <span class="i-name">icon-air</span><span class="i-code">0xe8ce</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8cf" class="the-icons span3"><i class="demo-icon icon-credit-card">&#xe8cf;</i> <span class="i-name">icon-credit-card</span><span class="i-code">0xe8cf</span></div>
+        <div title="Code: 0xe8d0" class="the-icons span3"><i class="demo-icon icon-floppy">&#xe8d0;</i> <span class="i-name">icon-floppy</span><span class="i-code">0xe8d0</span></div>
+        <div title="Code: 0xe8d1" class="the-icons span3"><i class="demo-icon icon-clipboard">&#xe8d1;</i> <span class="i-name">icon-clipboard</span><span class="i-code">0xe8d1</span></div>
+        <div title="Code: 0xe8d2" class="the-icons span3"><i class="demo-icon icon-megaphone">&#xe8d2;</i> <span class="i-name">icon-megaphone</span><span class="i-code">0xe8d2</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8d3" class="the-icons span3"><i class="demo-icon icon-database">&#xe8d3;</i> <span class="i-name">icon-database</span><span class="i-code">0xe8d3</span></div>
+        <div title="Code: 0xe8d4" class="the-icons span3"><i class="demo-icon icon-drive">&#xe8d4;</i> <span class="i-name">icon-drive</span><span class="i-code">0xe8d4</span></div>
+        <div title="Code: 0xe8d5" class="the-icons span3"><i class="demo-icon icon-bucket">&#xe8d5;</i> <span class="i-name">icon-bucket</span><span class="i-code">0xe8d5</span></div>
+        <div title="Code: 0xe8d6" class="the-icons span3"><i class="demo-icon icon-thermometer">&#xe8d6;</i> <span class="i-name">icon-thermometer</span><span class="i-code">0xe8d6</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8d7" class="the-icons span3"><i class="demo-icon icon-key">&#xe8d7;</i> <span class="i-name">icon-key</span><span class="i-code">0xe8d7</span></div>
+        <div title="Code: 0xe8d8" class="the-icons span3"><i class="demo-icon icon-flow-cascade">&#xe8d8;</i> <span class="i-name">icon-flow-cascade</span><span class="i-code">0xe8d8</span></div>
+        <div title="Code: 0xe8d9" class="the-icons span3"><i class="demo-icon icon-flow-branch">&#xe8d9;</i> <span class="i-name">icon-flow-branch</span><span class="i-code">0xe8d9</span></div>
+        <div title="Code: 0xe8da" class="the-icons span3"><i class="demo-icon icon-flow-tree">&#xe8da;</i> <span class="i-name">icon-flow-tree</span><span class="i-code">0xe8da</span></div>
+      </div>
+      <div class="row">
+        <div title="Code: 0xe8db" class="the-icons span3"><i class="demo-icon icon-flow-line">&#xe8db;</i> <span class="i-name">icon-flow-line</span><span class="i-code">0xe8db</span></div>
+        <div title="Code: 0xe8dc" class="the-icons span3"><i class="demo-icon icon-flow-parallel">&#xe8dc;</i> <span class="i-name">icon-flow-parallel</span><span class="i-code">0xe8dc</span></div>
+        <div title="Code: 0xe8dd" class="the-icons span3"><i class="demo-icon icon-rocket">&#xe8dd;</i> <span class="i-name">icon-rocket</span><span class="i-code">0xe8dd</span></div>
+        <div title="Code: 0xe8de" class="the-icons span3"><i class="demo-icon icon-gauge">&#xe8de;</i> <span class="i-name">icon-gauge</span><span class="i-code">0xe8de</span></div>
+      </div>
+    </div>
+    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
+  </body>
+</html>

src/mol-plugin-ui/state/actions.tsx

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ApplyActionControl } from './apply-action';
 import { State, StateAction } from '../../mol-state';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 import { PluginContext } from '../../mol-plugin/context';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {

src/mol-plugin-ui/state/animation.tsx

@@ -7,7 +7,7 @@
 import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 
 export class AnimationControlsWrapper extends PluginUIComponent<{ }> {
     render() {

src/mol-plugin-ui/state/common.tsx

@@ -11,7 +11,7 @@ import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { PluginContext } from '../../mol-plugin/context';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Subject } from 'rxjs';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 
 export { StateTransformParameters, TransformControlBase };
 
@@ -193,7 +193,7 @@ abstract class TransformControlBase<P, S extends TransformControlBase.ComponentS
         return <div className={wrapClass}>
             {display !== 'none' && <div className='msp-transform-header'>
                 <button className={`msp-btn msp-btn-block${isEmpty ? '' : ' msp-btn-collapse'}`} onClick={this.toggleExpanded} title={display.description}>
-                    {!isEmpty && <span className={`msp-icon msp-icon-${this.state.isCollapsed ? 'expand' : 'collapse'}`} />}
+                    {!isEmpty && <Icon name={this.state.isCollapsed ? 'expand' : 'collapse'} />}
                     {display.name}
                 </button>
             </div>}

src/mol-plugin-ui/state/snapshots.tsx

@@ -13,9 +13,10 @@ import { ParameterControls } from '../controls/parameters';
 import { ParamDefinition as PD} from '../../mol-util/param-definition';
 import { PluginState } from '../../mol-plugin/state';
 import { urlCombine } from '../../mol-util/url';
-import { IconButton, Icon, SectionHeader } from '../controls/common';
+import { IconButton, SectionHeader } from '../controls/common';
 import { formatTimespan } from '../../mol-util/now';
 import { PluginConfig } from '../../mol-plugin/config';
+import { Icon } from '../controls/icons';
 
 export class StateSnapshots extends PluginUIComponent<{ }> {
     downloadToFile = () => {

src/mol-plugin-ui/state/tree.tsx

@@ -9,7 +9,7 @@ import { PluginStateObject } from '../../mol-plugin-state/objects';
 import { State, StateObject, StateTransform, StateObjectCell } from '../../mol-state'
 import { PluginCommands } from '../../mol-plugin/commands';
 import { PluginUIComponent, _Props, _State } from '../base';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 
 export class StateTree extends PluginUIComponent<{ state: State }, { showActions: boolean }> {
     state = { showActions: true };
@@ -235,7 +235,7 @@ class StateTreeNodeLabel extends PluginUIComponent<
         const cellState = cell.state;
 
         const visibility = <button onClick={this.toggleVisible} className={`msp-btn msp-btn-link msp-tree-visibility${cellState.isHidden ? ' msp-tree-visibility-hidden' : ''}`}>
-            <span className='msp-icon msp-icon-visual-visibility' />
+            <Icon name='visual-visibility' />
         </button>;
 
         const style: React.HTMLAttributes<HTMLDivElement>['style'] = {
@@ -247,10 +247,10 @@ class StateTreeNodeLabel extends PluginUIComponent<
         const row = <div className={`msp-tree-row${isCurrent ? ' msp-tree-row-current' : ''}`} onMouseEnter={this.highlight} onMouseLeave={this.clearHighlight} style={style}>
             {label}
             {children.size > 0 &&  <button onClick={this.toggleExpanded} className='msp-btn msp-btn-link msp-tree-toggle-exp-button'>
-                <span className={`msp-icon msp-icon-${cellState.isCollapsed ? 'expand' : 'collapse'}`} />
+                <Icon name={cellState.isCollapsed ? 'expand' : 'collapse'} />
             </button>}
             {!cell.state.isLocked && <button onClick={this.remove} className='msp-btn msp-btn-link msp-tree-remove-button'>
-                <span className='msp-icon msp-icon-remove' />
+                <Icon name='remove' />
             </button>}{visibility}
         </div>;
 

src/mol-plugin-ui/structure/selection.tsx

@@ -16,6 +16,7 @@ import { stripTags } from '../../mol-util/string';
 import { StructureElement } from '../../mol-model/structure';
 import { ActionMenu } from '../controls/action-menu';
 import { ToggleButton } from '../controls/common';
+import { Icon } from '../controls/icons';
 
 export const DefaultQueries = ActionMenu.createItems(StructureSelectionQueryList, {
     label: q => q.label,
@@ -191,7 +192,7 @@ export class StructureSelectionControls<P, S extends StructureSelectionControlsS
         return <div>
             <div className='msp-control-row msp-row-text'>
                 <button className='msp-btn msp-btn-block' onClick={this.focus}>
-                    <span className={`msp-icon msp-icon-focus-on-visual`} style={{ position: 'absolute', left: '5px' }} />
+                    <Icon name='focus-on-visual' style={{ position: 'absolute', left: '5px' }} />
                     {this.stats}
                 </button>
             </div>

src/mol-plugin-ui/viewport.tsx

@@ -13,6 +13,7 @@ import { PluginUIComponent } from './base';
 import { ControlGroup, IconButton } from './controls/common';
 import { SimpleSettingsControl } from './viewport/simple-settings';
 import { DownloadScreenshotControls } from './viewport/screenshot';
+import { IconName } from './controls/icons';
 
 interface ViewportControlsState {
     isSettingsExpanded: boolean,
@@ -74,7 +75,7 @@ export class ViewportControls extends PluginUIComponent<ViewportControlsProps, V
         this.subscribe(this.plugin.events.interactivity.propsUpdated, () => this.forceUpdate());
     }
 
-    icon(name: string, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
+    icon(name: IconName, onClick: (e: React.MouseEvent<HTMLButtonElement>) => void, title: string, isOn = true) {
         return <IconButton icon={name} toggleState={isOn} onClick={onClick} title={title} />;
     }
 

src/mol-plugin-ui/viewport/help.tsx

@@ -10,7 +10,7 @@ import { PluginUIComponent } from '../base';
 import { StateTransformer, StateSelection } from '../../mol-state';
 import { SelectLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { StructureRepresentationInteraction } from '../../mol-plugin/behavior/dynamic/selection/structure-representation-interaction';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 
 function getBindingsList(bindings: { [k: string]: Binding }) {
     return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding])
@@ -54,7 +54,7 @@ class HelpGroup extends React.Component<{ header: string, initiallyExpanded?: bo
         return <div className='msp-control-group-wrapper'>
             <div className='msp-control-group-header'>
                 <button className='msp-btn msp-btn-block' onClick={this.toggleExpanded}>
-                    <span className={`msp-icon msp-icon-${this.state.isExpanded ? 'collapse' : 'expand'}`} />
+                    <Icon name={this.state.isExpanded ? 'collapse' : 'expand'} />
                     {this.props.header}
                 </button>
             </div>

src/mol-plugin-ui/viewport/screenshot.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ParameterControls } from '../controls/parameters';
 import { PluginUIComponent } from '../base';
-import { Icon } from '../controls/common';
+import { Icon } from '../controls/icons';
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 import { ViewportScreenshotHelper } from '../../mol-plugin/util/viewport-screenshot';