Change icons on browser pages

[TowelBin]

This would be the most important, and probably simplist step in styling browser pages. here is what I have so far.:

about:preferences

  #category-general > .category-icon
  {
    list-style-image: url("settings.svg");
  }
  #category-home > .category-icon
  {
    list-style-image: url("home-1x.svg");
  }
  #category-search > .category-icon
  {
    list-style-image: url("search.svg");
  }
  #category-privacy > .category-icon
  {
    list-style-image: url("/*I can't find the padlock icon*/lock.svg");
  }
  #category-sync> .category-icon
  {
    list-style-image: url("sync.svg");
  }
  .addons-icon
  {
    list-style-image: url("addons.svg");
  }
    .help-icon
  {
    list-style-image: url("addons.svg");
  }
  .face-smile
  {
  list-style-image: url("globe.svg"); 
/*a checkmark could also be ised for this*/
  }
  .face-sad
  {
    list-style-image: url("close.svg"); 
/*using a check for face smile would be more consistant if an X is used here, but I just really love the globe icon*/
  }
  #updateSettingCrossUserWarning
    background-image: url("info-1x.svg");
  }

I haven't tested it yet, so it might not work. It also might show a duplicate old icon judging by the icon update commits, but since the image source is css instead of an src.

[muckSponge]

I've been putting off theming the about pages because I don't want to jump down a rabbit hole but just commenting because it is on my list :)

[TowelBin]

Required:

1. figure out which userchrome files affect web pages (possibly global.css or usercontent.css?)
2. make sure functionality/layout isn't affected by changing icons
3. find how to isolate the specific browser page from other pages to prevent styling all pages