Icons on React App not working

Questions
1

Hi there,

I cannot get the icons to work in my react app, neither as <Icon /> component, nor in other components such as <Link />

What I tried:
Installed framework7-icons from npm
manually added fonts directory from the source on github and added the css code
Tried to run this code in my component:

        <Link
            iconIos="f7:arrow_up_circle_fill"
            iconAurora="f7:arrow_up_circle_fill"
            iconMd="material:send"
            slot="inner-end"
            onClick={event => this.sendMessage(event)}
        >
        </Link>

At the end, instead of icons, it just shows the text that is supposedly the class name of the icon font.

So what am I missing?

2

Check browser console? Is the icon font loaded? Maybe some other errors?

3

Hi there!

Thanks for the answer.

Actually there’s a warning message that I didn’t notice before, which says:

failed to decode downloaded font
OTS parsing error: invalid version tag

Tried to figure out why that is but so far couldn’t…

4

Quick question: where is, in your project, the font loaded? Do the paths there make sense with your directories setup?