Use images instead of text for Material Icons

We use Material Icons for the bug type icons in our bug lists (specifically, the defect/enhancement/task icons). But we use the implementation where the element's text content is just rendered as an icon using the Material icons typeface.

Which is nice in a lot of ways, but the main thing I dislike about it is it's still text, it's selectable, hovering it shows the text cursor, etc. There are ways to avoid that, like .material-icons{user-select:none}, but that applies even if the font failed to load.

And that's another problem with the implementation. It relies on the user not disabling web fonts and Google's servers working, or on the user having Material Icons installed for some reason, and it also relies on the user not overriding fonts at the browser or system levels.

And in the end, I think we only need 3 icons anyway. So just serving our own SVG or PNG files would also be more lightweight. It'd be good to set up anyway in case we add more icons in the future, or want to mix and match icons from other sources with material icons.

So, this would involve changing the components that render icons via Material Icons, adding icon files, and adding CSS rules to display the icon files.

How to display the icons? The advantage of using <img> tags is you get alt text and better a11y semantics. That seems best to me, but a blank element with background-image works too. I think the main reason I'd use CSS for this would be to avoid the ugly "broken" placeholder icon when the icons fail to load. Seems unlikely the icons would fail to load, but if they did, background-image would make it effectively blank. It wouldn't be able to convey any information since there would be no alt text. So I think img tags are probably best, but if you can think of a good reason to do something else, that's fine.

mozilla / bugzy

Use images instead of text for Material Icons #253