0
555
ViewsHow 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.
<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';
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question