search

shaka-project / shaka-player

JavaScript player library / DASH & HLS client / MSE-EME player
Apache License 2.0
6.93k stars 1.32k forks source link

Replace Material Design Icon font with SVG-in-CSS #2467

Open joeyparrish opened 4 years ago

joeyparrish commented 4 years ago

We already embed some SVG icons as data URIs into the compiled CSS (LESS does this for us). We should compare this to the Material Design Icons font we're using and see which is smaller. If the web font files are larger, we should switch to embedding the icons into the CSS instead.

joeyparrish commented 4 years ago

While tinkering with the UI styles a little at the level of our Cast receiver application, I noticed that the material design icon font makes it nearly impossible to restyle certain things, since we're embedding a specific word in the DOM rather than attaching a class or attribute. In some cases, we might be able to hide the text and insert a graphic in pure CSS at the app level, but in other cases, it didn't seem feasible.

So moving to SVG-in-CSS could also be a big improvement in an app's ability to re-style the UI.

joeyparrish commented 2 years ago

Use SVGs from here to replace the icon font: https://github.com/marella/material-design-icons/tree/main/svg#readme

Note that we are currently using "rounded" style, if I'm not mistaken.