mui icon not rendering when React app is deployed

Question

In my app I'm importing a mui/icon:

import PriceCheckIcon from "@mui/icons-material/PriceCheck";

When I run the app locally the icon displays fine but once deployed on Surge nothing shows, and no errors. Then I tried to deploy with Vercel and had the same issue. Has anyone experienced this before or would know why it isn't displaying. I do have a condition for it to display which is when I get a 502.

This is my condition if that helps:

<span
            style={
              Price > cinemaWorldPrice ? { color: "green" } : { color: "red" }
            }
          >
            {error && Price > cinemaWorldPrice ? (
              <PriceCheckIcon />
            ) : (
              <CurrencyFormat
                value={cinemaWorldPrice}
                displayType={"text"}
                prefix={"$"}
                decimalScale={2}
                fixedDecimalScale
              />
            )}
          </span>

Answer 1

I think you can run this command:

npm install @mui/material @emotion/react @emotion/styled

and this should be working fine.