From 43845adb71ebca3aa272ae7354d8820f8df28227 Mon Sep 17 00:00:00 2001
From: David Sehnal <david.sehnal@gmail.com>
Date: Sun, 19 Apr 2020 17:02:52 +0200
Subject: [PATCH] import materialui icons separately - avoids loading extra ~5k
 modules in webpack

---
 src/extensions/rcsb/assembly-symmetry/ui.tsx |  3 ++-
 src/mol-plugin-ui/base.tsx                   |  3 ++-
 src/mol-plugin-ui/controls.tsx               |  8 +++++++-
 src/mol-plugin-ui/controls/action-menu.tsx   |  5 ++++-
 src/mol-plugin-ui/controls/common.tsx        |  5 ++++-
 src/mol-plugin-ui/controls/parameters.tsx    | 11 ++++++++++-
 src/mol-plugin-ui/left-panel.tsx             |  7 ++++++-
 src/mol-plugin-ui/sequence.tsx               |  2 +-
 src/mol-plugin-ui/state/actions.tsx          |  2 +-
 src/mol-plugin-ui/state/animation.tsx        |  2 +-
 src/mol-plugin-ui/state/common.tsx           |  6 +++++-
 src/mol-plugin-ui/state/snapshots.tsx        | 11 ++++++++++-
 src/mol-plugin-ui/state/tree.tsx             |  8 +++++++-
 src/mol-plugin-ui/structure/components.tsx   | 10 +++++++++-
 src/mol-plugin-ui/structure/focus.tsx        |  3 ++-
 src/mol-plugin-ui/structure/generic.tsx      |  4 +++-
 src/mol-plugin-ui/structure/measurements.tsx | 11 ++++++++++-
 src/mol-plugin-ui/structure/selection.tsx    |  4 +++-
 src/mol-plugin-ui/structure/source.tsx       |  2 +-
 src/mol-plugin-ui/structure/volume.tsx       |  4 +++-
 src/mol-plugin-ui/task.tsx                   |  2 +-
 src/mol-plugin-ui/toast.tsx                  |  2 +-
 src/mol-plugin-ui/viewport.tsx               |  8 +++++++-
 src/mol-plugin-ui/viewport/help.tsx          |  4 +++-
 src/mol-plugin-ui/viewport/screenshot.tsx    |  4 +++-
 25 files changed, 106 insertions(+), 25 deletions(-)

diff --git a/src/extensions/rcsb/assembly-symmetry/ui.tsx b/src/extensions/rcsb/assembly-symmetry/ui.tsx
index c0aafb18b..a51bb0089 100644
--- a/src/extensions/rcsb/assembly-symmetry/ui.tsx
+++ b/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
diff --git a/src/mol-plugin-ui/base.tsx b/src/mol-plugin-ui/base.tsx
index 5ceaa3115..d175494ca 100644
--- a/src/mol-plugin-ui/base.tsx
+++ b/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);
diff --git a/src/mol-plugin-ui/controls.tsx b/src/mol-plugin-ui/controls.tsx
index 12e13fd98..a95e91882 100644
--- a/src/mol-plugin-ui/controls.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/controls/action-menu.tsx b/src/mol-plugin-ui/controls/action-menu.tsx
index 44c840c20..29abeb16b 100644
--- a/src/mol-plugin-ui/controls/action-menu.tsx
+++ b/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)
diff --git a/src/mol-plugin-ui/controls/common.tsx b/src/mol-plugin-ui/controls/common.tsx
index f9ac614b0..80d2effe2 100644
--- a/src/mol-plugin-ui/controls/common.tsx
+++ b/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'
 
diff --git a/src/mol-plugin-ui/controls/parameters.tsx b/src/mol-plugin-ui/controls/parameters.tsx
index 2cb2c1579..1a22bb635 100644
--- a/src/mol-plugin-ui/controls/parameters.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/left-panel.tsx b/src/mol-plugin-ui/left-panel.tsx
index 20f99e90f..1669b6005 100644
--- a/src/mol-plugin-ui/left-panel.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/sequence.tsx b/src/mol-plugin-ui/sequence.tsx
index b4b4af197..e3acb28f0 100644
--- a/src/mol-plugin-ui/sequence.tsx
+++ b/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;
 
diff --git a/src/mol-plugin-ui/state/actions.tsx b/src/mol-plugin-ui/state/actions.tsx
index b598fe4f9..a0cf634b9 100644
--- a/src/mol-plugin-ui/state/actions.tsx
+++ b/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() {
diff --git a/src/mol-plugin-ui/state/animation.tsx b/src/mol-plugin-ui/state/animation.tsx
index 238c4ff83..8be04e3d4 100644
--- a/src/mol-plugin-ui/state/animation.tsx
+++ b/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() {
diff --git a/src/mol-plugin-ui/state/common.tsx b/src/mol-plugin-ui/state/common.tsx
index 41f15c78d..8d7a2ae09 100644
--- a/src/mol-plugin-ui/state/common.tsx
+++ b/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 };
 
diff --git a/src/mol-plugin-ui/state/snapshots.tsx b/src/mol-plugin-ui/state/snapshots.tsx
index d0c311d19..faa7db60e 100644
--- a/src/mol-plugin-ui/state/snapshots.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/state/tree.tsx b/src/mol-plugin-ui/state/tree.tsx
index 30377bcd2..d7c5bcfd5 100644
--- a/src/mol-plugin-ui/state/tree.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/components.tsx b/src/mol-plugin-ui/structure/components.tsx
index 83833c81d..141333bcd 100644
--- a/src/mol-plugin-ui/structure/components.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/focus.tsx b/src/mol-plugin-ui/structure/focus.tsx
index 0966591dc..c1205c331 100644
--- a/src/mol-plugin-ui/structure/focus.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/generic.tsx b/src/mol-plugin-ui/structure/generic.tsx
index 9b7f8d646..60b171ed2 100644
--- a/src/mol-plugin-ui/structure/generic.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/measurements.tsx b/src/mol-plugin-ui/structure/measurements.tsx
index 38b09e7b1..38d7016cc 100644
--- a/src/mol-plugin-ui/structure/measurements.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/selection.tsx b/src/mol-plugin-ui/structure/selection.tsx
index a8bc17abf..2b4b36133 100644
--- a/src/mol-plugin-ui/structure/selection.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/structure/source.tsx b/src/mol-plugin-ui/structure/source.tsx
index 331d25f9c..04840c5ca 100644
--- a/src/mol-plugin-ui/structure/source.tsx
+++ b/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 {
diff --git a/src/mol-plugin-ui/structure/volume.tsx b/src/mol-plugin-ui/structure/volume.tsx
index 8b1fe7060..adfc82154 100644
--- a/src/mol-plugin-ui/structure/volume.tsx
+++ b/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
diff --git a/src/mol-plugin-ui/task.tsx b/src/mol-plugin-ui/task.tsx
index 9f907f77a..f3fffb77b 100644
--- a/src/mol-plugin-ui/task.tsx
+++ b/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() {
diff --git a/src/mol-plugin-ui/toast.tsx b/src/mol-plugin-ui/toast.tsx
index 642db5b69..cb6adabac 100644
--- a/src/mol-plugin-ui/toast.tsx
+++ b/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 = () => {
diff --git a/src/mol-plugin-ui/viewport.tsx b/src/mol-plugin-ui/viewport.tsx
index fe07fa5bb..43e0ab25f 100644
--- a/src/mol-plugin-ui/viewport.tsx
+++ b/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';
diff --git a/src/mol-plugin-ui/viewport/help.tsx b/src/mol-plugin-ui/viewport/help.tsx
index 9209fa3fb..f01da7eb7 100644
--- a/src/mol-plugin-ui/viewport/help.tsx
+++ b/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]);
diff --git a/src/mol-plugin-ui/viewport/screenshot.tsx b/src/mol-plugin-ui/viewport/screenshot.tsx
index 47cf12311..3d5297b7c 100644
--- a/src/mol-plugin-ui/viewport/screenshot.tsx
+++ b/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';
-- 
GitLab