Add support for readers that remove disturbing elements

[MoritzWeber0]

Safari offers a reader, which removes disturbing elements. There are some other Apps which offer the same, for example Telegram Instant Views.

The layout can be improved for these readers, especially the icons are not displayed correctly:

[therobrob]

I’m unsure, if we can fix this with the current icon implementation. The instant views remove CSS and JS, so the spans with the icon appear as text.

I’ve researched two possible alternatives:

Option 1: we add the icons as real svg-files

Option 2: we add the icons not via DOM, rather than as before element, like this:
HTML
<span class="material-symbols-rounded" data-icon="{{ . }}"> </span>

CSS
.material-symbols-rounded::before { content: attr(data-icon); font-family: 'Material Symbols Rounded'; }

Option 2 sounds promising to me. What do you think, @MoritzWeber0? :)

[MoritzWeber0]

Option 1: we add the icons as real svg-files

Option 2: we add the icons not via DOM, rather than as before element, like this: HTML <span class="material-symbols-rounded" data-icon="{{ . }}"> </span>

CSS .material-symbols-rounded::before { content: attr(data-icon); font-family: 'Material Symbols Rounded'; }

Option 2 sounds promising to me. What do you think, @MoritzWeber0? :)

Both options do work, but I prefer option 1:

• When we originally decided for using a font for icons, we thought that the font would be cached. That's not the case as the maximum cache duration of GitHub pages is 10 minutes.
• The size of the font is 330kB and therefore quite large in comparison to other requests; it slows down the page load on slow internet connections.
• I've had it happen several times when loading the FIP Guide with a bad internet connection that the page loaded before the icons. This leads to a broken layout:
  

However, I don't want to miss the convenience features and don't want to have the SVGs in the repository - but we can try to use SVG based npm packages (https://github.com/google/material-design-icons?tab=readme-ov-file#npm-packages).