Bootstrap-Icons font not included in PCF control

Question

I'm trying to use Bootstrap Icons in my PCF control, and I'm having problems displaying the icon because the fonts are not being included

Including Bootstrap-Icons: npm i bootstrap-icons produces the following package.json

{
  "name": "pcf-project",
  "version": "1.0.0",
  "description": "Project containing your PowerApps Component Framework (PCF) control.",
  "homepage": ".",
  "scripts": {
    "build": "pcf-scripts build",
    "clean": "pcf-scripts clean",
    "rebuild": "pcf-scripts rebuild",
    "start": "pcf-scripts start"
  },
  "dependencies": {
    "@types/node": "^10.12.18",
    "@types/powerapps-component-framework": "^1.2.0",
    "bootstrap": "^5.0.2",
    "bootstrap-datepicker": "^1.9.0",
    "bootstrap-icons": "^1.5.0",
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "@types/bootstrap": "^5.0.16",
    "@types/bootstrap-datepicker": "0.0.14",
    "@types/jquery": "^3.5.5",
    "pcf-scripts": "^1",
    "pcf-start": "^1"
  }
}

But when I run npm start I can't see the icons.

How do I tell the npm build command to include the fonts directory?

Answer 1

Currently, font resources (files with a .ttf file extension) are not supported by the framework.

https://learn.microsoft.com/en-us/powerapps/developer/component-framework/faq#can-i-bundle-font-resources