Skin filterbox and use LabIcon on InputGroup

packages/extensionmanager/src/widget.tsx

@@ -65,7 +65,7 @@ export class SearchBar extends React.Component<
           placeholder={this.props.placeholder}
           onChange={this.handleChange}
           value={this.state.value}
-          rightIcon="search"
+          rightIcon="ui-components:search"
           disabled={this.props.disabled}
         />
       </div>

packages/filebrowser/src/browser.ts

@@ -38,6 +38,11 @@ const FILE_BROWSER_CLASS = 'jp-FileBrowser';
  */
 const CRUMBS_CLASS = 'jp-FileBrowser-crumbs';
 
+/**
+ * The class name added to the filebrowser filterbox node.
+ */
+const FILTERBOX_CLASS = 'jp-FileBrowser-filterBox';
+
 /**
  * The class name added to the filebrowser toolbar node.
  */
@@ -106,7 +111,7 @@ export class FileBrowser extends Widget {
     this._crumbs.addClass(CRUMBS_CLASS);
     this.toolbar.addClass(TOOLBAR_CLASS);
     this._listing.addClass(LISTING_CLASS);
-    this._filenameSearcher.addClass(CRUMBS_CLASS);
+    this._filenameSearcher.addClass(FILTERBOX_CLASS);
 
     this.layout = new PanelLayout();
     this.layout.addWidget(this.toolbar);

packages/filebrowser/src/search.tsx

@@ -36,7 +36,7 @@ const FilterBox = (props: IFilterBoxProps) => {
   return (
     <InputGroup
       type="text"
-      rightIcon="search"
+      rightIcon="ui-components:search"
       placeholder={props.placeholder}
       onChange={handleChange}
       value={filter}

packages/filebrowser/style/base.css

@@ -244,3 +244,7 @@
 .jp-LastModified-hidden {
   display: none;
 }
+
+.jp-FileBrowser-filterBox {
+  padding: 4px;
+}

packages/json-extension/src/component.tsx

@@ -58,7 +58,7 @@ export class Component extends React.Component<IProps, IState> {
           placeholder="Filter..."
           onChange={this.handleChange}
           value={this.state.value}
-          rightIcon="search"
+          rightIcon="ui-components:search"
         />
         <JSONTree
           data={data}

packages/ui-components/src/blueprint.tsx

@@ -6,10 +6,6 @@ import {
   Button as BPButton,
   IButtonProps as IBPButtonProps
 } from '@blueprintjs/core/lib/cjs/components/button/buttons';
-import {
-  Icon as BPIcon,
-  IIconProps
-} from '@blueprintjs/core/lib/cjs/components/icon/icon';
 import {
   Collapse as BPCollapse,
   ICollapseProps
@@ -26,6 +22,7 @@ import {
   Checkbox as BPCheckbox,
   ICheckboxProps
 } from '@blueprintjs/core/lib/cjs/components/forms/controls';
+import { LabIcon } from './icon';
 export { Intent } from '@blueprintjs/core/lib/cjs/common/intent';
 
 import { classes } from './utils';
@@ -36,7 +33,7 @@ interface IButtonProps extends IBPButtonProps {
 }
 
 interface IInputGroupProps extends IBPInputGroupProps {
-  rightIcon?: IIconProps['icon'];
+  rightIcon?: string;
 }
 
 type CommonProps<T> = React.DOMAttributes<T>;
@@ -60,7 +57,7 @@ export const InputGroup = (props: IInputGroupProps & CommonProps<any>) => {
         className={classes(props.className, 'jp-InputGroup')}
         rightElement={
           <div className="jp-InputGroupAction">
-            <BPIcon className={'jp-BPIcon'} icon={props.rightIcon} />
+            <LabIcon.resolveReact icon={props.rightIcon} />
           </div>
         }
       />