CustomSearchInput.jsx

import React from 'react';
import classNames from 'classnames';

import Input, {InputAdornment} from 'material-ui/Input';
import IconButton from 'material-ui/IconButton';
import { FormControl } from 'material-ui/Form';
import SearchIcon from 'mdi-material-ui/Magnify';

import {replaceComponent, getRawComponent} from 'meteor/vulcan:core';

class CustomSearchInput extends getRawComponent('SearchInput'){
  render () {
    const {
      classes,
      className,
      dense
    } = this.props;

    return (
      <div className={classNames('search-input', classes.root, className, dense && classes.dense)}>
        <FormControl className={classes.search}>

          

          <Input className={classNames('search-input')}
                 classes={{ input: classes.input }}
                 id="search-input"
                 inputRef={(input) => this.input = input}
                 value={this.state.value}
                 type="search"
                 onChange={this.updateSearch}
                 startAdornment={<InputAdornment position="start"><SearchIcon /></InputAdornment>}
          />

          {/*<IconButton className={classNames(classes.clear, !this.state.value && classes.clearDisabled)}
                      onClick={this.clearSearch}
                      disabled={!this.state.value}
          >
            <ClearIcon/>
          </IconButton>*/}

        </FormControl>          
      </div>
    );
  }
}

replaceComponent('SearchInput', CustomSearchInput)