npm bootstrap-icons Icon Font sass not compiling correctly

Question

I'm using Node to build a small, static website with Bootstrap Icon Fonts

<i class="bi-boombox"></i>

I followed the Bootstrap example on Github. Issue is the bootstrap-icons.css isn't compiling correctly.

This happens with just the css:compile script.

/* /node_modules/bootstrap-icons/font/bootstrap-icons.css */
.bi-boombox::before { content: "\f684"; }

/* Compiled */
.bi-boombox::before{content:""}.

Here is the relevant package.json:

  "scripts": {
    "copy:html": "copyfiles -u 1 ./src/*.html public",
    "copy:js": "copyfiles -u 2 ./src/js/*.js public/js",
    "copy": "npm-run-all --parallel copy:*",
    "css:lint": "stylelint src/scss/",    
    "css:compile": "sass --style compressed --source-map --embed-sources --no-error-css --load-path=node_modules src/scss/:public/css/",
    "css:prefix": "postcss --replace public/css/styles.css --use autoprefixer --map",
    "css:purge": "purgecss --keyframes --css public/css/styles.css --content public/index.html --output public/css/",
    "css": "npm-run-all css:*",
    "build": "npm run copy css"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.8",
    "bootstrap": "^5.3.0",
    "bootstrap-icons": "^1.10.5"
  },
  "devDependencies": {
    "npm-run-all2": "^6.1.1",   
    "copyfiles": "^2.4.1",
    "sass": "^1.64.1",
    "postcss": "^8.4.27",
    "postcss-cli": "^10.1.0",    
    "autoprefixer": "^10.4.14",
    "purgecss": "^5.0.0",
    "stylelint": "^15.10.2",
    "stylelint-config-twbs-bootstrap": "^11.0.1"
  }

And the relevant styles.scss :

@import "../node_modules/bootstrap/scss/bootstrap";

$bootstrap-icons-font-dir: "../node_modules/bootstrap-icons/font/fonts";
@import "bootstrap-icons/font/bootstrap-icons";

Any help would be much appreciated :)