CODEWITHSUNDEEP
reactjsmaterial-ui
Aakash Chauhan
Aakash Chauhan

Reputation: 338

how to place image in material ui button by passing startIcon prop

I am using Material ui Button. this button should hold an image & button-name as its child. i don't want to use as one of the children of my Button, but i want to do it by passing startIcon prop to Button. button should look like:-

i have tried this:-

<Button className={classes.navButtons} startIcon={ZapierIcon}>
    Zapier
</Button>

but it is showing path of my image in button instead of actual image....can anyone give some suggestion what i am doing wrong.

Upvotes: 9

Views: 20843

Answers (1)

Siraj Alam
Siraj Alam

Reputation: 10045

Just pass the Avatar in place of icon.

     <Button
        variant="contained"
        color="secondary"
        startIcon={<Avatar src={'http://www.wpsimplesponsorships.com/wp-content/uploads/2019/05/cropped-icon-256x256.png'} />}
      >
        Delete
      </Button>

https://codesandbox.io/s/bold-dew-3rl6z

Upvotes: 18

Related Questions