Boxed X (Icon not rendering)

[westlakem]

I'm doing a code-share project and trying to include material icons in my project. My project structure is as follows

src
- app
- assets
- - material-design-icons.css
- - MaterialIcons-Regular.ttf
- environments
- app.css
- main.ts
- styles.css
...

In app.css

.mdi {
  font-family: "Material Icons", "MaterialIcons-Regular";
  font-size: 200
}

In app.module.tns.ts

    TNSFontIconModule.forRoot({
      'mdi': './assets/material-design-icons.css'
    })

in my console when I load the app, it looks like they're loading correctly:

JS: Loading collection 'mdi' from file: ./assets/material-design-icons.css
JS: mdi-3d-rotation: \ue84d
JS: mdi-ac-unit: \ueb3b
...

in my component.tns.html file:

<Label class="mdi" [text]="'mdi-shopping-basket' | fonticon"></Label>
<!-- <Label class="mdi" [text]="'\ue8cc'"></Label> --> (also tried this one)

yet in my app this is what i see

[VimalKumarS]

I am also facing same issue. any pointer

[westlakem]

For me, the fonts (.ttf files) were installed in the wrong place...

For a code-sharing project, the fonts need to be in:

- src
- - fonts
- - - (ttf file)