Can't resize Material Ui icon with fontSize

I am trying to change the size of the icon to match the size of the text next to it, using makeStyles and className. For some reason the fontSize is overriden when the page actually loads in. For reference I want to make this happen for the TaskAltIcon. Also tried to use iconStyle instead of className but it didn't work either. I really want to avoid using sx or style in the actual jsx part if I can. Thanks in advance for the help.

import { makeStyles } from '@mui/styles';
import { Link } from 'react-router-dom';
import TaskAltIcon from '@mui/icons-material/TaskAlt';

const useStyles = makeStyles((theme) => ({
    template: {
        backgroundColor: theme.palette.secondary.main,
        color: theme.palette.primary.main
    },
    largeIcon: {
        color: theme.palette.secondary.secondary,
        marginRight: '0.2em',
        transform: 'translateY(0.11em)',
        fontSize: '1em'
    }
}));

const NavBar = () => {
    const classes = useStyles();
    const listsList = ['Workout', 'Reading', 'Random Thing', 'Example'];
    return (
        <div className={`nav-bar ${classes.template}`}>
            <Link to='/' className="title">
                <h1>Home</h1>
            </Link>
            <Link to='/task-list' className="title">
                <h1><TaskAltIcon className={classes.largeIcon} />Task Lists</h1>
            </Link>
            <div className="lists-list">
                {listsList.map((list, index) => (
                    <Link to={`/lists/${list}`}key={index}>
                        <div className="list">
                            <p className="list-line list-line-top"></p>
                            <p className="list-middle">
                                <p className="list-circle"></p>
                                <span>{list}</span>
                            </p>
                            {index + 1 !== listsList.length && <p className="list-line list-line-bottom"></p>}
                        </div>
                    </Link>
                ))}
            </div>
            <Link to='/settings' className="title">
                <h1>Settings</h1>
            </Link>
        </div>
    );
}
 
export default NavBar;