Icon not rendering properly in Firefox when adding them by SASS - css

Question

I'm trying to override an icon in an angularjs component that I have no control over. It's a stepper library called md-steppers. I was able to change the current step icon in chrome. Here is how I did it.
/* ... */
&.md-active md-step-label-wrapper {
font-weight: bolder;
display: flex;
&:before {
font-family: 'Material Icons';
content: '\E150';
color: white;
}
}
/* ... */
As you can see I'm altering the icon by loading the font Material Icons and then changing the content.
This solution is working great in Chrome. I'm having a few problems in firefox, however. The icons does not seem to be rendering properly when I'm at 100% ( or less ) zoom. Everything above that seems fine.
You can compare the image above with the result on Chrome ( both at 100% zoom )
The result on Firefox seams a little bit Blurrier and not well formed.
I'm aware that this might be a bug in Firefox itself as it has been reported before. I saw a few workaround that revolve around the mask css property but I'm not sure it can apply to me, since i'm not using mask at all. This is assuming the icons are rendered as SVG.
I've already look up CSS - Using SVG mask not displaying correctly in Firefox and Firefox not rendering svg properly on the topics but I could not make it work.
Am I missing something here and what can I do to correct this ?
Here is a Jsfiddle with the problem occurring.
The problem seams to be present in the iframe, in chrome as well.

Answer 1

Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided.
It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac
Mini on MacOS 10.14.6 with a 4K display # 1920 x 1080 (i.e. HiDPI).
The same browser (i.e. Firefox) may handle fonts differently on
depending on operating system and hardware setup.
Solution
The demo link for md-steppers uses SVG data in the CSS:
.md-step.md-complete md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }
See Line 398
I would probably try using this same method and avoid using the icon font if you think this is where the issue is arising from. If you also have the same issue in Firefox at the md-steppers demo link above then I guess the issue is bigger than just icon fonts and is also affecting SVGs. You can scroll down further to: Other Possible Fixes.
The Material Design icons can be downloaded in SVG format from here.
Use the search filter in the sidebar and type in edit for the icon you want, then press the [Download] SVG 24 button in the bottom left corner.
The icon you download will be the default black colour so there are some changes you will need to make in order to make it suitable for you to use.
Open up the downloaded SVG in a code editor and refer to the way the SVG is formatted in the CSS for the md-steppers demo. Change the height and width properties, and also add the fill property to the <svg> tag, so it should look something like:
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>
Copy the SVG code as a single line and use it in a similar way that it's used in the md-steppers demo CSS:
.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}
JSFiddle: https://jsfiddle.net/wx0brdjL/
Alternatively, you can save the SVG after you modify the width/height/fill to a file, then reference it in your CSS like:
background-image: url('edit-24px.svg');
Other Possible Fixes:
If using the SVG above is still causing things to blur on Firefox, or if you want to stick with using the icon font, there are a few things to try which might fix the way that the icon font renders on your device:
Option 1
Applying transform: translateZ(0) to either &.md-active md-step-label-wrapper or &:before.
Option 2
Applying the font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS properties. Keeping in mind that changes here might affect the way it renders on someone else's device.
Option 3
I just came across this open issue on the Material Design Icons Github where a user recommends using this CSS hack: transform: rotate(0.03deg)

Answer 2

I can't reproduce this issue with the jsfiddle you supplied (all icons look okay for me). But I have had similar issues myself with other font-icons.
I think the issue comes from the font-weight: bolder; you've added to the parent element in your code. The browser now also wants to make the icon bolder, but since there isn't a "bolder"-version of the icon the browser tries to do it by itself and thereby making the icon look weird.
Your fiddle doesn't have the font-weight: bolder;, so im thinking your issue might have something to do with that. Try and remove it and see if the issue still persists.