Semantic-UI-React icon-font issues when using React-Router and second level links

Meteor 2.5.0 with React frontend
Semantic-UI-React (SUIR)
React-Router v6 (same issue with v5)

When loading the app on a second level link (i.e. http://localhost:3000/firstLevelPage/secondLevelPage), the icon-fonts are not loaded correctly.

The problem seems to be related to the relative paths to SUIR-icon-fonts:

@font-face {
  font-family: 'Icons';
  src: url("./themes/default/assets/fonts/icons.eot");

I placed the fonts into public/themes/default/assets/fonts/ which works fine on top level pages.

Fix attempt 1 It can be fixed by putting
<base href="http://localhost:3000/">
into the <head> of clients index.html. But obviously this wouldn’t work for deployment on various URLs.

Fix attempt 2 When creating a custom css-file and overwriting the paths with absolute paths, the fonts are displayed correctly. I.e.:

@font-face {
  font-family: "Icons";
  src: url("/themes/default/assets/fonts/icons.woff2") format("woff2");

But then there is still a lot of errors/warnings in the console.

Sandbox I’ve created a sandbox to reproduce this issue:

Here is a demonstration:

This is probably more related to SUIR and React-Router, but maybe someone around here has an idea about it. I do not get why this issue only appears in second level links. Thanks for your help!