search

jossef / material-design-icons-iconfont

Material Design icons + Development Experience
https://jossef.github.io/material-design-icons-iconfont
Apache License 2.0
455 stars 58 forks source link

Broken icons if document fonts are disabled in Firefox #67

Closed fabianski7 closed 2 years ago

fabianski7 commented 3 years ago

Actual behaviour

Using some modification script for firefox, such as ghacks/user.js (to improve security and privacy of the browser), causes the icons not to be displayed and the extension to get messy.

Steps to reproduce

  1. Open the advanced firefox preferences (about:config) and change the browser.display.use_document_fonts option from 1 to 0
  2. Open some extension or site that use those icons 2.1 https://jossef.github.io/material-design-icons-iconfont/ [Screenshot] 2.2 QOwnNotes firefox extension [Screenshot]

https://github.com/qownnotes/web-companion/issues/25

fabianski7 commented 3 years ago

in the related issue, that I created on qownnotes, there are some examples of how this was resolved qownnotes/web-companion#25

jossef commented 3 years ago

@fabianski7 1) sorry for the late response, my day job is extremely time consuming and I have very little time to contribute as before to this project 2) I have a solution for you. in the demo application, toggle the "CSS CLASSES"

instead of this form

<i class="material-icons">2k_plus</i>
<i class="material-icons">account_box</i>
...

use this form

<i class="material-icons _2k_plus"></i>
<i class="material-icons account_box"></i>
...

image

I've edited in F12 Developer Tools inline HTML as a proof on firefox with this setting enabled

image

TBD for me - will set the demo page when switching to css classes to also reflect on the displayed items will update the demo and close this issue