Huge icon at first render on NextJS

[yafkari]

Similarly to this issue, I have my icon being huge and black (so without the styles i guess) at first render, then afterwards it takes the size and the color I gave it (with tailwind classes).

Example code:

<div className="relative">
    <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
    </div>
    <input
        ...
    />
</div>

Not sure if this happens only in dev mode but didn't found anyone mentioning it for heroicons so still wanted to create this.