[I] Broken icons if document fonts are disabled in Firefox

[fabianski7]

pbek/QOwnNotes#1834

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.

Screenshot

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. Disable and enable the extension

More information

here are some cases I found with more information about this bug and how it was fixed.

CTemplar/webclient#508
arkenfox/user.js#824
FirefoxBar/HeaderEditor#46

[pbek]

Thank you for your suggestion. I can't really say if that's a "bug" if Vuetify.js (the UI library) uses Google's Material icons (which are distributed as fonts) and the user tells the browser to "Never use document's fonts". 😅 The only "solution" seems to be to entirely use a different icon library and replace every icon.

[pbek]

https://www.npmjs.com/package/material-design-icons-iconfont is pretty popular and https://jossef.github.io/material-design-icons-iconfont/ neither works with browser.display.use_document_fonts = 0

[pbek]

You could try to open an issue directly at https://github.com/jossef/material-design-icons-iconfont/issues.

[fabianski7]

I will do this but the last commit from the repository was over a year ago, I don't know if they still plan to keep this project alive.

And also most of these people don't have the slightest concern about privacy (in this case Font fingerprinting). I'm almost sure he will ignore this issue.

[pbek]

Yes, Font Fingerprinting is "a thing" but in the case of this browser extension hardly exploitable, or am I wrong?

[pbek]

Funny that I still got a reliable font fingerprint on https://webbrowsertools.com/font-fingerprint/ with browser.display.use_document_fonts = 0.

[fabianski7]

Funny that I still got a reliable font fingerprint on https://webbrowsertools.com/font-fingerprint/ with browser.display.use_document_fonts = 0.

that's exactly how it should work. What this preference does (what firefox does) to protect privacy and prevent entropy, is to assign the same ID to all users. Then all of them will be identified as a single person, when there are many others.

[pbek]

Ah exactly, now I remember.

[jossef]

I will do this but the last commit from the repository was over a year ago, I don't know if they still plan to keep this project alive.

And also most of these people don't have the slightest concern about privacy (in this case Font fingerprinting). I'm almost sure he will ignore this issue.

~ this is me not ignoring the reported issue 😛 ~

[pbek]

👍🏻 So will there be a solution, @jossef? 😁

[fabianski7]

~ this is me not ignoring the reported issue stuck_out_tongue ~

I think I was wrong 🤔 🤣

[fabianski7]

👍🏻 So will there be a solution, @jossef? grin

jossef/material-design-icons-iconfont#67 (comment)

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>
...

[pbek]

Is there anything that I can do?

Currently the extensions uses icons in Vue.js like this: <v-icon>chevron_left</v-icon>.
Using <i class="material-icons">chevron_left</i> still shows the same icon with browser.display.use_document_fonts=1.

Using <i class="material-icons _chevron_left"></i> or <i class="material-icons chevron_left"></i> doesn't show any icon even with browser.display.use_document_fonts=1.

[jossef]

Is there anything that I can do?

Currently the extensions uses icons in Vue.js like this: <v-icon>chevron_left</v-icon>.
Using <i class="material-icons">chevron_left</i> still shows the same icon with browser.display.use_document_fonts=1.

Using <i class="material-icons _chevron_left"></i> or <i class="material-icons chevron_left"></i> doesn't show any icon even with browser.display.use_document_fonts=1.

@pbek
which icon library are you using? the official material design icons or my fork?

[pbek]

This one:

web-companion/package.json

Line 20 in 704a22b

"material-design-icons-iconfont": "^4.0.5",

[jossef]

@pbek
upgrade to v6.0.2
then it will show properly
this feature wasn't exist in 4.0.5

[pbek]

upgrade to v6.0.2

Thank you, @jossef!

That plus using icons like <i class="material-icons _chevron_left"></i> instead of <v-icon>chevron_left</v-icon> helps, but only works for the icons I set myself. Vuetify still uses <v-icon>.

I spent several hours trying to get Vuetify 2 or another icon set to work, but no success yet...

[pbek]

I now re-did all icons...

20.9.0

• now the Material Design Icons are used as icons
  instead of Google's Material Icons (that were using icon fonts) to allow disabling
  of icon fonts in Firefox
• all text fields are now clearable with a small x icon

[pbek]

Oh great!

The chrome store took the bundle...

[pbek]

About 4 hours of work later...

20.9.1

• icons now were switched to Font Awesome Icons 4
  because all other icon sets take far too much space to be accepted into the Firefox store

@fabianski7, there now is a new release, could you please test it and report if it works for you?

[fabianski7]

Yes it works! thank you so much for that, I appreciate your work!

[pbek]

Great, thank you for testing!
I got a lot of gray hairs along the way... 😅

[jossef]

and thank you for keeping me up to date with privacy standards
👏