How to align material-ui icon inside a button properly?

user_11973720 0
Viewed 754

How do I align the <ChevronRightIcon> inside <PrimaryButton> properly. I want it after the button label towards the right.

Screenshot

<PrimaryButton style={{
                paddingRight: '26px'
                }} 
                label="Open Button"
                aria-controls="simple-menu"
                aria-haspopup="true"
                onClick={this.handleOpenMenu.bind(this)
                }
                className={classes.progress}
                color="#fff"
                >
                   <ChevronRightIcon></ChevronRightIcon>
 </PrimaryButton>

<ChevronRightIcon> is from material-ui and <PrimaryButton> is self created.

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
export default function PrimaryButton(props) {
  const style = {
    height: 36,
    boxShadow: 'none',
    ...props.style,
  };
  return (
    <RaisedButton {...props} primary style={style} name="primary-button">
      {props.children}
    </RaisedButton>
  )
}

PrimaryButton.muiName = 'RaisedButton';
material-ui reactjs javascript
1 Answers

If you want to use an icon in a regular button you should pass your icon to startIcon or endIcon prop (in your case endIcon) documentation. Then don't forget to pass all the passed props of your PrimaryButton to your <Button/> component.

<PrimaryButton
  endIcon={<ChevronRightIcon />}
  style={{
    paddingRight: '26px',
  }}
  label="Open Button"
  aria-controls="simple-menu"
  aria-haspopup="true"
  onClick={this.handleOpenMenu.bind(this)}
  className={classes.progress}
  color="#fff"
/>
              


// import ChevronRightIcon from '@material-ui/icons/ChevronRight';
const icon = (name) => (props) => <MaterialUI.Icon {...props} children={name} />;
const ChevronRightIcon = icon("chevron_right");

function Demo() {
  return (
    <PrimaryButton
      endIcon={<ChevronRightIcon />}
      label="Open Button"
      variant="contained"
      // ...
    />
  );
}

function PrimaryButton({label, ...props}) {
  return (
    <MaterialUI.Button
      {...props}
      color="primary"
      children={label}
    />
  );
}

ReactDOM.render(<Demo />, document.querySelector("#demo"));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<script crossorigin src="https://unpkg.com/@material-ui/core@4/umd/material-ui.development.js"></script>
<div id="demo"></div>

user_141865770
Related