Search code examples
reactjstypescriptmaterial-uitsx

how to use material ui icon v1.0.0-beta.36 in .tsx component

I'm using material-ui-icons v1.0.0-beta.36.

I'm trying to use a Search icon in a .tsx component.

.tsx component:

import React, { Component, ReactElement } from 'react'
import Search from 'material-ui-icons/Search'

import { Button, CustomInput } from '../thirdParty/CreativeTim/components'
import { ENTER_KEY_CODE } from '../../../Services/Constants'
import { SvgIconProps } from 'material-ui/SvgIcon'

let SearchIcon: ReactElement<SvgIconProps> = <Search />

enter image description here

Getting this error on the <Search /> component:

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | Component<...> | null' is not a constructor function for JSX elements.
  Type 'Component<SvgIconProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
    Type 'Component<SvgIconProps, any, any>' is not assignable to type 'ElementClass'.ts(2605)

Also, tried using it without assigning the variable:

.tsx component:

import React, { Component, ReactElement } from 'react'
import Search from 'material-ui-icons/Search'

import { Button, CustomInput } from '../thirdParty/CreativeTim/components'
import { ENTER_KEY_CODE } from '../../../Services/Constants'
import { SvgIconProps } from 'material-ui/SvgIcon'

...

  render() {
    return (
      <div>
        ...
        <Button
          onClick={this.onSearchclick}
          color="white"
          aria-label="edit"
          justIcon
          round
        >
          <Search />
        </Button>
      </div>
    )
  }
}

enter image description here

Getting kind of a same error on the <Search /> component:

JSX element type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | Component<...> | null' is not a constructor function for JSX elements.
  Type 'Component<SvgIconProps, any, any>' is not assignable to type 'Element | ElementClass | null'.
    Type 'Component<SvgIconProps, any, any>' is not assignable to type 'ElementClass'.
      Types of property 'render' are incompatible.
        Type '() => ReactNode' is not assignable to type '{ (): ReactNode; (): false | Element | null; }'.
          Type 'ReactNode' is not assignable to type 'false | Element | null'.
            Type 'undefined' is not assignable to type 'false | Element | null'.ts(2605)

Couldn't find anything online with a solution for that..

Any help would be appreciated.

Edit zealous-curran-xuyth

Solution

  • I ended up solving that by declaring the icon with any type: 

    const SearchIcon: any = Search

    and then use it as a regular component:

    <SearchIcon />