CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Neha Chaudhary
Neha Chaudhary

Reputation: 1279

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

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';

Upvotes: 1

Views: 3175

Answers (1)

e.a.
e.a.

Reputation: 948

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>

Upvotes: 4

Related Questions