import materialui icons separately

- avoids loading extra ~5k modules in webpack

src/extensions/rcsb/assembly-symmetry/ui.tsx

@@ -16,7 +16,8 @@ import { StateAction, StateSelection } from '../../../mol-state';
 import { PluginStateObject } from '../../../mol-plugin-state/objects';
 import { PluginContext } from '../../../mol-plugin/context';
 import { Task } from '../../../mol-task';
-import { Check, Extension } from '@material-ui/icons';
+import Check from '@material-ui/icons/Check';
+import Extension from '@material-ui/icons/Extension';
 
 interface AssemblySymmetryControlState extends CollapsableState {
     isBusy: boolean

src/mol-plugin-ui/base.tsx

@@ -9,7 +9,8 @@ import * as React from 'react';
 import { Observable, Subscription } from 'rxjs';
 import { PluginContext } from '../mol-plugin/context';
 import { Button, ColorAccent } from './controls/common';
-import { ArrowRight, ArrowDropDown } from '@material-ui/icons';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 import { Icon } from './controls/icons';
 
 export const PluginReactContext = React.createContext(void 0 as any as PluginContext);

src/mol-plugin-ui/controls.tsx

@@ -5,7 +5,13 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Build, NavigateBefore, NavigateNext, PlayArrow, SkipPrevious, Stop, SubscriptionsOutlined } from '@material-ui/icons';
+import Build from '@material-ui/icons/Build';
+import NavigateBefore from '@material-ui/icons/NavigateBefore';
+import NavigateNext from '@material-ui/icons/NavigateNext';
+import PlayArrow from '@material-ui/icons/PlayArrow';
+import SkipPrevious from '@material-ui/icons/SkipPrevious';
+import Stop from '@material-ui/icons/Stop';
+import SubscriptionsOutlined from '@material-ui/icons/SubscriptionsOutlined';
 import * as React from 'react';
 import { UpdateTrajectory } from '../mol-plugin-state/actions/structure';
 import { LociLabel } from '../mol-plugin-state/manager/loci-label';

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

@@ -8,7 +8,10 @@
 import * as React from 'react';
 import { ParamDefinition } from '../../mol-util/param-definition';
 import { Button, ControlGroup } from './common';
-import { ArrowRight, Check, Close, ArrowDropDown } from '@material-ui/icons';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
 
 export class ActionMenu extends React.PureComponent<ActionMenu.Props> {
     hide = () => this.props.onSelect(void 0)

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

@@ -7,7 +7,10 @@
 import * as React from 'react';
 import { Color } from '../../mol-util/color';
 import { Icon } from './icons';
-import { ArrowRight, ArrowDropDown, Remove, Add } from '@material-ui/icons';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import Remove from '@material-ui/icons/Remove';
+import Add from '@material-ui/icons/Add';
 
 export type ColorAccent = 'cyan' | 'red' | 'gray' | 'green' | 'purple' | 'blue' | 'orange'
 

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

@@ -5,7 +5,16 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ArrowDownward, ArrowDropDown, ArrowRight, ArrowUpward, BookmarksOutlined, Check, Clear, DeleteOutlined, HelpOutline, MoreHoriz } from '@material-ui/icons';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
+import Check from '@material-ui/icons/Check';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import MoreHoriz from '@material-ui/icons/MoreHoriz';
 import * as React from 'react';
 import { Mat4, Vec2, Vec3 } from '../../mol-math/linear-algebra';
 import { PluginContext } from '../../mol-plugin/context';

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

@@ -4,7 +4,12 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { AccountTreeOutlined, DeleteOutlined, HelpOutline, HomeOutlined, SaveOutlined, Tune } from '@material-ui/icons';
+import AccountTreeOutlined from '@material-ui/icons/AccountTreeOutlined';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import HomeOutlined from '@material-ui/icons/HomeOutlined';
+import SaveOutlined from '@material-ui/icons/SaveOutlined';
+import Tune from '@material-ui/icons/Tune';
 import * as React from 'react';
 import { Canvas3DParams } from '../mol-canvas3d/canvas3d';
 import { PluginCommands } from '../mol-plugin/commands';

src/mol-plugin-ui/sequence.tsx

@@ -22,7 +22,7 @@ import { ElementSequenceWrapper } from './sequence/element';
 import { elementLabel } from '../mol-theme/label';
 import { Icon } from './controls/icons';
 import { StructureSelectionManager } from '../mol-plugin-state/manager/structure/selection';
-import { HelpOutline } from '@material-ui/icons';
+import HelpOutline from '@material-ui/icons/HelpOutline';
 
 const MaxDisplaySequenceLength = 5000;
 

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

@@ -9,7 +9,7 @@ import { State } from '../../mol-state';
 import { PluginUIComponent } from '../base';
 import { Icon } from '../controls/icons';
 import { ApplyActionControl } from './apply-action';
-import { Code } from '@material-ui/icons';
+import Code from '@material-ui/icons/Code';
 
 export class StateObjectActions extends PluginUIComponent<{ state: State, nodeRef: string, hideHeader?: boolean, initiallyCollapsed?: boolean, alwaysExpandFirst?: boolean }> {
     get current() {

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

@@ -8,7 +8,7 @@ import * as React from 'react';
 import { PluginUIComponent } from '../base';
 import { ParameterControls, ParamOnChange } from '../controls/parameters';
 import { Button } from '../controls/common';
-import { PlayArrow } from '@material-ui/icons';
+import PlayArrow from '@material-ui/icons/PlayArrow';
 
 export class AnimationControls extends PluginUIComponent<{ onStart?: () => void }> {
     componentDidMount() {

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

@@ -13,7 +13,11 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { Subject } from 'rxjs';
 import { Icon } from '../controls/icons';
 import { ExpandGroup, ToggleButton, Button, IconButton } from '../controls/common';
-import { Refresh, ArrowRight, ArrowDropDown, Check, Tune } from '@material-ui/icons';
+import Refresh from '@material-ui/icons/Refresh';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import Check from '@material-ui/icons/Check';
+import Tune from '@material-ui/icons/Tune';
 
 export { StateTransformParameters, TransformControlBase };
 

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

@@ -4,7 +4,16 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Add, ArrowDownward, ArrowUpward, CloudUpload, DeleteOutlined, GetApp, OpenInBrowser, SaveOutlined, SwapHoriz, Refresh } from '@material-ui/icons';
+import Add from '@material-ui/icons/Refresh';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import CloudUpload from '@material-ui/icons/CloudUpload';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import GetApp from '@material-ui/icons/GetApp';
+import OpenInBrowser from '@material-ui/icons/OpenInBrowser';
+import SaveOutlined from '@material-ui/icons/SaveOutlined';
+import SwapHoriz from '@material-ui/icons/SwapHoriz';
+import Refresh from '@material-ui/icons/Refresh';
 import { OrderedMap } from 'immutable';
 import * as React from 'react';
 import { PluginCommands } from '../../mol-plugin/commands';

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

@@ -4,7 +4,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { ArrowDropDown, ArrowRight, Close, DeleteOutlined, HomeOutlined, VisibilityOffOutlined, VisibilityOutlined } from '@material-ui/icons';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import Close from '@material-ui/icons/Close';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import HomeOutlined from '@material-ui/icons/HomeOutlined';
+import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
 import * as React from 'react';
 import { debounceTime, filter } from 'rxjs/operators';
 import { PluginStateObject } from '../../mol-plugin-state/objects';

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

@@ -4,7 +4,15 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Add, BookmarksOutlined, Delete, DeleteOutlined, MoreHoriz, Restore, Tune, VisibilityOffOutlined, VisibilityOutlined } from '@material-ui/icons';
+import Add from '@material-ui/icons/Add';
+import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
+import Delete from '@material-ui/icons/Delete';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import MoreHoriz from '@material-ui/icons/MoreHoriz';
+import Restore from '@material-ui/icons/Restore';
+import Tune from '@material-ui/icons/Tune';
+import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
 import * as React from 'react';
 import { getStructureThemeTypes } from '../../mol-plugin-state/helpers/structure-representation-params';
 import { StructureComponentManager } from '../../mol-plugin-state/manager/structure/component';

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

@@ -4,7 +4,8 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { CenterFocusStrong, Clear } from '@material-ui/icons';
+import CenterFocusStrong from '@material-ui/icons/CenterFocusStrong';
+import Clear from '@material-ui/icons/Clear';
 import * as React from 'react';
 import { OrderedSet, SortedArray } from '../../mol-data/int';
 import { MmcifFormat } from '../../mol-model-formats/structure/mmcif';

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

@@ -5,7 +5,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { MoreHoriz, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
+import MoreHoriz from '@material-ui/icons/MoreHoriz';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
+import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
 import * as React from 'react';
 import { HierarchyRef } from '../../mol-plugin-state/manager/structure/hierarchy-state';
 import { PluginCommands } from '../../mol-plugin/commands';

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

@@ -5,7 +5,16 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Add, ArrowDownward, ArrowUpward, DeleteOutlined, HelpOutline, MoreHoriz, RemoveOutlined, Tune, VisibilityOutlined, VisibilityOffOutlined } from '@material-ui/icons';
+import Add from '@material-ui/icons/Add';
+import ArrowDownward from '@material-ui/icons/ArrowDownward';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import DeleteOutlined from '@material-ui/icons/DeleteOutlined';
+import HelpOutline from '@material-ui/icons/HelpOutline';
+import MoreHoriz from '@material-ui/icons/MoreHoriz';
+import RemoveOutlined from '@material-ui/icons/RemoveOutlined';
+import Tune from '@material-ui/icons/Tune';
+import VisibilityOutlined from '@material-ui/icons/VisibilityOutlined';
+import VisibilityOffOutlined from '@material-ui/icons/VisibilityOffOutlined';
 import * as React from 'react';
 import { Loci } from '../../mol-model/loci';
 import { StructureElement } from '../../mol-model/structure';

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

@@ -5,7 +5,9 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Close, Clear, Brush } from '@material-ui/icons';
+import Close from '@material-ui/icons/Close';
+import Clear from '@material-ui/icons/Clear';
+import Brush from '@material-ui/icons/Brush';
 import * as React from 'react';
 import { StructureSelectionQueries, StructureSelectionQuery } from '../../mol-plugin-state/helpers/structure-selection-query';
 import { InteractivityManager } from '../../mol-plugin-state/manager/interactivity';

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

@@ -16,7 +16,7 @@ import { StructureFocusControls } from './focus';
 import { UpdateTransformControl } from '../state/update-transform';
 import { StructureSelectionStatsControls } from './selection';
 import { StateSelection } from '../../mol-state';
-import { BookmarksOutlined } from '@material-ui/icons';
+import BookmarksOutlined from '@material-ui/icons/BookmarksOutlined';
 import { MoleculeSvg } from '../controls/icons';
 
 interface StructureSourceControlState extends CollapsableState {

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

@@ -16,7 +16,9 @@ import { StructureHierarchyManager } from '../../mol-plugin-state/manager/struct
 import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { StateSelection, StateTransform } from '../../mol-state';
 import { VolumeStreaming } from '../../mol-plugin/behavior/dynamic/volume-streaming/behavior';
-import { Check, Error as ErrorSvg, BlurOn } from '@material-ui/icons';
+import Check from '@material-ui/icons/Check';
+import ErrorSvg from '@material-ui/icons/Error';
+import BlurOn from '@material-ui/icons/BlurOn';
 
 interface VolumeStreamingControlState extends CollapsableState {
     isBusy: boolean

src/mol-plugin-ui/task.tsx

@@ -11,7 +11,7 @@ import { TaskManager } from '../mol-plugin/util/task-manager';
 import { filter } from 'rxjs/operators';
 import { Progress } from '../mol-task';
 import { IconButton } from './controls/common';
-import { Cancel } from '@material-ui/icons';
+import Cancel from '@material-ui/icons/Cancel';
 
 export class BackgroundTaskProgress extends PluginUIComponent<{ }, { tracked: OrderedMap<number, TaskManager.ProgressEvent> }> {
     componentDidMount() {

src/mol-plugin-ui/toast.tsx

@@ -10,7 +10,7 @@ import * as React from 'react';
 import { PluginUIComponent } from './base';
 import { PluginToastManager } from '../mol-plugin/util/toast';
 import { IconButton } from './controls/common';
-import { Cancel } from '@material-ui/icons';
+import Cancel from '@material-ui/icons/Cancel';
 
 class ToastEntry extends PluginUIComponent<{ entry: PluginToastManager.Entry }> {
     private hide = () => {

src/mol-plugin-ui/viewport.tsx

@@ -5,7 +5,13 @@
  * @author David Sehnal <david.sehnal@gmail.com>
  */
 
-import { Autorenew, BuildOutlined, CameraOutlined, Close, Crop, Fullscreen, Tune } from '@material-ui/icons';
+import Autorenew from '@material-ui/icons/Autorenew';
+import BuildOutlined from '@material-ui/icons/BuildOutlined';
+import CameraOutlined from '@material-ui/icons/CameraOutlined';
+import Close from '@material-ui/icons/Close';
+import Crop from '@material-ui/icons/Crop';
+import Fullscreen from '@material-ui/icons/Fullscreen';
+import Tune from '@material-ui/icons/Tune';
 import * as React from 'react';
 import { resizeCanvas } from '../mol-canvas3d/util';
 import { PluginCommands } from '../mol-plugin/commands';

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

@@ -12,7 +12,9 @@ import { SelectLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { FocusLoci } from '../../mol-plugin/behavior/dynamic/representation';
 import { Icon } from '../controls/icons';
 import { Button } from '../controls/common';
-import { ArrowRight, ArrowDropDown, Camera } from '@material-ui/icons';
+import ArrowRight from '@material-ui/icons/ArrowRight';
+import ArrowDropDown from '@material-ui/icons/ArrowDropDown';
+import Camera from '@material-ui/icons/Camera';
 
 function getBindingsList(bindings: { [k: string]: Binding }) {
     return Object.keys(bindings).map(k => [k, bindings[k]] as [string, Binding]);

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

@@ -14,7 +14,9 @@ import { Subject } from 'rxjs';
 import { ViewportScreenshotHelper } from '../../mol-plugin/util/viewport-screenshot';
 import { Button, ExpandGroup } from '../controls/common';
 import { CameraHelperProps } from '../../mol-canvas3d/helper/camera-helper';
-import { GetApp, Launch, Warning } from '@material-ui/icons';
+import GetApp from '@material-ui/icons/GetApp';
+import Launch from '@material-ui/icons/Launch';
+import Warning from '@material-ui/icons/Warning';
 import { PluginCommands } from '../../mol-plugin/commands';
 import { Icon } from '../controls/icons';
 import { StateExportImportControls, LocalStateSnapshotParams } from '../state/snapshots';