How to use the @blueprintjs/icons.IconNames.CROSS function in @blueprintjs/icons

export const ClearableInput = React.memo(function ClearableInput(props: ClearableInputProps) {
  const { className, value, onChange, placeholder } = props;

  return (
     onChange(e.target.value)}
      rightElement={
        value ? <button> onChange('')} /&gt; : undefined
      }
      placeholder={placeholder}
    /&gt;
  );
});
</button>

placeholder="Enter folder name..."
                    selectAllOnFocus={true}
                    value={this.state.newFolderName}
                    onChange={this.handleSetFolderName}
                  />
                
                <div>
                  <div>
                    {controlButton(
                      'Confirm',
                      IconNames.TICK,
                      this.handleCreateMaterialFolder,
                      {},
                      !this.state.newFolderName
                    )}
                    {controlButton('Cancel', IconNames.CROSS, this.handleCloseDialog)}
                  </div>
                </div>
              
            )}
          
        
        
        <div>
          <div>
            </div></div>

icon={IconNames.MANUALLY_ENTERED_DATA}
            text="Submit JSON supervisor"
            onClick={() => this.setState({ supervisorSpecDialogOpen: true })}
          />
          <menuitem> this.setState({ showResumeAllSupervisors: true })}
          /&gt;
          <menuitem> this.setState({ showSuspendAllSupervisors: true })}
          /&gt;
          <menuitem> this.setState({ showTerminateAllSupervisors: true })}
          /&gt;
        
        {this.renderResumeAllSupervisorAction()}
        {this.renderSuspendAllSupervisorAction()}
        {this.renderTerminateAllSupervisorAction()}
      
    );
  }
</menuitem></menuitem></menuitem>

{
        icon: supervisorSuspended ? IconNames.PLAY : IconNames.PAUSE,
        title: supervisorSuspended ? 'Resume' : 'Suspend',
        onAction: () =>
          supervisorSuspended
            ? this.setState({ resumeSupervisorId: id })
            : this.setState({ suspendSupervisorId: id }),
      },
      {
        icon: IconNames.STEP_BACKWARD,
        title: 'Reset',
        intent: Intent.DANGER,
        onAction: () => this.setState({ resetSupervisorId: id }),
      },
      {
        icon: IconNames.CROSS,
        title: 'Terminate',
        intent: Intent.DANGER,
        onAction: () => this.setState({ terminateSupervisorId: id }),
      },
    );
    return actions;
  }

return ({ filter, onChange, key }) => {
    const filterValue = filter ? filter.value : '';
    return (
       onChange(e.target.value)}
        value={filterValue}
        rightElement={
          filterValue &amp;&amp; <button> onChange('')} /&gt;
        }
        placeholder={placeholder}
      /&gt;
    );
  };
}</button>

/>
                
                
                  
                
                <button style="{i" type="button">
              
            )
          })}
        </button>

render () {
    const {availableOptions, langOptions, loadedKey, isLoaded, busy, lastError, paneEnabled, bandEnabled, getMessage} = this.props;
    const availKeys = Object.keys(availableOptions).sort();
    return (
      <div>
        <div style="{{width:'350px'}}">
          <div>
            <button>
          </button></div>
          <div>
            {getMessage('CLOSED_CAPTIONS_TITLE')}
            {busy &amp;&amp; }
          </div>
          
            
            {availKeys.map(function (key) {
              const option = langOptions.find(option =&gt; option.value === key);
              return (
                
                  {option.label}
                
              );
            })}
          </div></div>

<div>
        {controlButton('', IconNames.TRASH, this.handleOpenDialog)}
        <dialog title="Delete Sourcecast">
          <div>
            <p>Are you sure to delete this sourcecast entry?</p>
          </div>
          <div>
            <div>
              {controlButton('Confirm Delete', IconNames.TRASH, this.handleDelete)}
              {controlButton('Cancel', IconNames.CROSS, this.handleCloseDialog)}
            </div>
          </div>
        </dialog>
      </div>
    );
  }

{langOptions.map(option =>
                   option.value === key)}
                    onSelect={this._addOption} />)}
              
            
          
          <div style="{{paddingLeft:">
            {selected
              ? <div>
                  <textarea value="{subtitlesText}" style="{{width:" rows="{7}">                  &lt;div className='buttons-bar'&gt;
                    &lt;Files  onChange={this._fileChanged} accepts={this._fileAccepts} style={{display: 'inline-block'}}&gt;&lt;Button icon={IconNames.UPLOAD}&gt;{"Load"}&lt;/Button&gt;&lt;/Files&gt;
                    &lt;Button onClick={this._saveSelected} icon={IconNames.DOWNLOAD} text={"Save"}/&gt;
                    &lt;Button onClick={this._reloadSelected} icon={IconNames.CLOUD_DOWNLOAD} disabled={!selected.url} text={"Revert"}/&gt;
                    &lt;Button onClick={this._removeSelected} icon={IconNames.CROSS} text={'Remove'}/&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              : &lt;NonIdealState visual='arrow-left' title={"No language selected"} description={"Load existing subtitles or add a new language, and click the Edit button."} /&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className='hbox mb' style={{textAlign: 'center', backgroundColor: '#efefef', padding: '10px'}}&gt;
          &lt;div className='fill center'&gt;
            &lt;Button onClick={this._beginEdit} disabled={!selected} icon={IconNames.EDIT} text={"Edit"} style={{marginRight: '10px'}}/&gt;
            &lt;Button onClick={this._save} icon={IconNames.CLOUD_UPLOAD} text={"Save"} disabled={!canSave} intent={unsaved ? Intent.PRIMARY : Intent.NONE}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        {!canSave &amp;&amp;
          &lt;Callout intent={Intent.WARNING} title={"Insufficient access rights"}&gt;
            {"The current user is not allowed to modify this Codecast."}
          &lt;/Callout&gt;}
        &lt;div&gt;</textarea></div></div>

export const MenuButton = (props: IMenuButtonProps) => {
  const {
    handleClick,
    homeUrl,
    isOpen,
    menuIcon = IconNames.MENU,
    menuOpenIcon = IconNames.CROSS,
    menuButtonAsLink = false,
    menuShowButton = true,
    theme = defaultTheme
  } = props
  if (menuShowButton && !menuButtonAsLink) {
    return (
      <button>
        
      </button>
    )
  } else if (menuShowButton &amp;&amp; menuButtonAsLink) {