how to align icon and text in mui

Issue

This Content is from Stack Overflow. Question asked by badcoder01

I’m trying to implement a AppBar using Material UI. I have some Link in the appbar, which will be redirecting to different pages. Now I’m using Icons with the text, nut they don’t align properly, I tried overwriting it with CSS, but it doesn’t seem to be working.

I want them to aligned as it is in the logout button. Thanks in advance 🙂

here’s my code

    export default function ButtonAppBar() {
     const navigate = useNavigate();
     const { user, logout } = useAuth();

     const [items, setItems] = useState([]);

     const [loading, setLoading] = useState(true);

     const useStyles = makeStyles((theme) => ({
          navlinks: {
               display: "flex",
          },
          link: {
               textDecoration: "none",
               color: "black",
               fontSize: "15px",
               marginLeft: theme.spacing(1.5),
               "&:hover": {
                    color: "rgb(202, 144, 38)",
                    borderBottom: "1px solid white",
               },
          },
          appbar: {
               // color: '#fff',
               background: '#ffffff',

          },
          icons:{
               marginTop:0
          }

     }))

     useEffect(() => {

          axios.get('https://api.github.com/users/hadley/orgs').then(function (res) {
               console.log(res);
               setItems(res.data);
               console.log(res.data);
               setLoading(false);
          });
     }, []);

     const handleLogout = async () => {
          try {
               console.log(await logout());

               navigate(PATH_AUTH.login, { replace: true });
          } catch (error) {
               console.error(error);
          }
     };

     const handleUserClick = async () => {
          try {
               navigate(PATH_APP.app.user, { replace: true });
          } catch (error) {
               console.error(error);
          }
     };

     // Styles
     const classes = useStyles();



     return (
          <Box sx={{ flexGrow: 1 }}>
               <AppBar position="static" className={classes.appbar} sx={{ backgroundColor: 'white', }}>
                    <Toolbar >
                         <Box
                              component="img"
                              sx={{
                                   width: 120,
                                   justifyItems: 'center',
                              }}
                              alt="SacolaLogo"
                              src={SacolaLogo}
                         />
                         <Typography variant="h6" textAlign={'end'} component="div" sx={{ flexGrow: 1 }}>
                              <RouterLink to="/" className={classes.link} >
                                   <HomeIcon /> Home
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                                   <DashboardIcon className={classes.icons} /> Dashboard
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                                   <LineAxisIcon />  NFT Transcation
                              </RouterLink>
                              <RouterLink to="/" className={classes.link}>
                              <UserIcon /> Profiles
                              </RouterLink>
                         </Typography>
                         <Divider orientation="vertical" variant="fullWidth" flexItem />
                         <Button type="submit" variant="standard" color="primary" sx={{ color: 'black', fontWeight: 'bold', fontSize:13}} startIcon={<LogoutIcon />} onClick={handleLogout}> Logout </Button>
                    </Toolbar>
               </AppBar>
          </Box>
     );
}

this is how my appbar looks like
sample



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?