I encountered a similar issue and found a helpful solution:
- My struggle was with the font-icons from materialize css, particularly when self-hosting them. To resolve this, I switched to using font-icons provided by Google and followed the guidelines outlined on this website. I will update my answer with more details regarding the bug number.
Remember to add the following CSS styles:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Recommended icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Additionally, ensure that you include all font formats offered by Google: WOFF2, WOFF, Truetype, EOT, and even SVGs for maximum cross-browser compatibility.
If you are not hosting the font-icons yourself, try implementing the above CSS code. While I have not tested this with a CDN, it worked for me with self-hosted font-icons. Share your results so we can explore alternative solutions if needed.