Take this icon for instance: https://fontawesome.com/icons/rug?f=classic&s=solid
You'll see there's a switch for Nox/Lumos:noxlumos
If I add the icon to my webpage without specifying the mode, then it will automatically detect the OS/browser setting and set it accordingly. There is absolutely nothing regarding this on the documentation.
I think that the way in which you want to solve this is not possible. I don't know any way to replace the HTML (icons) with CSS on toggling. At least not in a way the stuff would be displayed after.
If your problem is solvable in JavaScript, I would recommend you to adjust your logic and handle this with JS.