如何对齐mui中的图标和文本

Question

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

Answer 1

You can use Typography with flex property like below:

<RouterLink to="/" className={classes.link} >
    <Typography sx={{ display: "flex", alignItems: "center" }}>
        <HomeIcon/>
        Home
      </Typography>
</RouterLink>