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";
}