Use sync icons from Material to reduce toolbox clutter

[phoudoin]

In effort to reduce toolbox cluttering, here a change to use Material Icons font's icons for Sync plugin.

See screenshot:

[phoudoin]

Same can be done for other common plugins like bookmark, drawtools...

[EvoldicA]

I like the idea of cleaning up the toolbox. This was never merged. Maybe due to the faction biased colour choice? Does anyone think its a good idea to do similar with other things? I could probably take a crack at it.

[phoudoin]

It's not faction biased, it's just reusing the visual common sense to report disabled (gray), error (red), or ok (green) sync status.
Others icons without live status indication, like bookmarks icon, should keep the default toolbox color (yellow).

[johnd0e]

Same can be done for other common plugins like bookmark, drawtools...

Imagine there are 3 plugins with icons. Could we avoid triple including the same stylesheet in the head?

[modos189]

I suggest not import heavy third-party Google icons, which slows down the IITC start, but to import only the necessary Google Material icons in svg format, as I started here:
IITC-CE/ingress-intel-total-conversion@59cc312

[johnd0e]

@modos189

Really heavy?

They say that it's only 42KB for 900+ icons.

[phoudoin]

@johnd0e

Imagine there are 3 plugins with icons. Could we avoid triple including the same stylesheet in the head?

First, if it's exactly the same URL, the cached content will be reused, not triple downloaded.
But, agreed, it will be triple evaluated, which is bad.

We can mitigate this by assign an id to check if it's already there:

if ( $( "#material-icons-stylesheet" ).length == 0 ) {
  // add Google Material icons.
  $("head").append(
    '<link id="material-icons-stylesheet" rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">'
  );
}