Using Icon Font with Woff2

I am using the RadzenIcon component with the included material symbols.woff2 file to display icons (which works). Now I want to include another icon font, namely Bootstrap Icons, as I require their filetype icons.

• I have downloaded the .woff2 font file.
• I have included it in my css

   @font-face {        font-family: 'Bootstrap Icons';        font-style: normal;        font-weight: 400;        src: url("../fonts/BootstrapIcons.woff2") format('woff2');    }

• I have checked and the font is displayed in the sources and the css is set for the correct font:

<RadzenIcon Icon="file-pdf" Style="--rz-icon-font-family: var(--rz-icon-font-family-files);"/>

(where --rz-icon-font-family-files: "Bootstrap Icons";)

But the icon is not displayed. Only the text file-pdf is displayed. I have also tried it with bi-file-pdf, bi bi-file-pdf and all the "code point" variables:

E.g.:

• Unicode: U+F640
• CSS: \F640
• JS: \uF640
• HTML: 

Am I doing something wrong or is this a problem with the radzen icon component. And if so, how do I know that a font will work with this component as the material symbols do?

Cheers

P.S.:

This is how Radzen defines the class for their icon component:

.rzi {  box-sizing: border-box;  font-family: var(--rz-icon-font-family);  font-weight: var(--rz-icon-weight, inherit);  font-style: normal;  font-size: var(--rz-icon-size);  display: inline-block;  width: 1em;  height: 1em;  line-height: 1;  text-transform: none;  letter-spacing: normal;  word-wrap: normal;  white-space: nowrap;  font-variation-settings: "FILL" var(--rz-icon-fill), "GRAD" var(--rz-icon-grade), "opsz" var(--rz-icon-optical-size);  /* Support for all WebKit browsers. */  -webkit-font-smoothing: antialiased;  /* Support for Safari and Chrome. */  text-rendering: optimizeLegibility;  /* Support for Firefox. */  -moz-osx-font-smoothing: grayscale;  /* Support for IE. */  font-feature-settings: "liga";}