next.jsstyled-componentssanity

Weird demo icon replacing symbols and signs in project

I was wondering if anyone could help me solve this weird issue.

I'm running my Next.js (with Sanity and styled components) project locally and some of the symbols gets replaced by this weird demo icon (see picture below). Letters don't seem to be affected by this icon, but symbols, numbers and signs like ,.-& gets replaced. It doesn't seem to be entirely consistent either, so the same sign could be replaced some places, but not other places.

enter image description here

This picture should've shown a counter with a minus sign (on the left), a number (in the middle) and a plus sign (on the right).

Here's my package.json in case there's some library doing this magic:

"dependencies": {
  "@portabletext/react": "^3.0.0",
  "@sanity/client": "^5.4.2",
  "@sanity/image-url": "^1.0.2",
  "@types/node": "18.15.11",
  "@types/react": "18.0.34",
  "@types/react-dom": "18.0.11",
  "eslint": "8.38.0",
  "eslint-config-next": "13.3.0",
  "next": "13.3.0",
  "react": "18.2.0",
  "react-dom": "18.2.0",
  "styled-components": "^5.3.9",
  "typescript": "5.0.4"
},
"resolutions": {
  "styled-components": "^5"
},
"devDependencies": {
  "@types/styled-components": "^5.1.26",
  "babel-plugin-styled-components": "^2.1.1",
  "csstype": "^3.1.2"
}
Solution

  • I found out that there was an error with the font I was using in the project, and that was where the icon was coming from. Hope it helps someone in the future!