Font-Awesome adds attribute aria-hidden which prevents icons from appearing in the browser [SSR]

I want to include some Font-Awesome Icons in my Next.js project. I’ve added the needed

<script src="https://kit.fontawesome.com/xxxxxxxx.js" crossorigin="anonymous"></script>

tag to my Head and then the

<i className="fas fa-arrow-right"></i>

tag to my render method. If I open the website in my browser it gives me this console warning:

index.js:1 Warning: Extra attributes from the server: aria-hidden

and the

<i className="fas fa-arrow-right"></i>

switches to

<i className="fas fa-arrow-right" aria-hidden="true"></i>

I’ve already tried the react-fontawesome package but that doesn’t seem to work with SSR. Adding

aria-hidden="false"

manually didn’t fix it either.

I guess this is a problem with SSR but I wasn’t able to find a good solution or alternative for it.

This Post Has One Comment

  1. No Fault

    I had the same issue and I resolved by adding aria-hidden to the icon in this way:

Leave a Reply