Rework about:pref page SVG icons and clean up css/dom

[gyandeeps]

Test Plan

1. Go to about:preferences
2. Look at navigation area on left it should match the below picture (all images being SVG)
3. The helpful hints should be at the bottom of the navigation area
4. Click each option (general, search, tabs, etc) and it should have a highlight state also

• Did you search for similar issues before submitting this one?
  yes

Original issue description

• Describe the issue you encountered:
  Rework about:pref page SVG icons and clean up css/dom. Make it more responsive.

• Platform (Win7, 8, 10? macOS? Linux distro?):
  all

• Brave Version (revision SHA):
  master

• Steps to reproduce:
  n/a

• Actual result:
  n/a

• Expected result:
  n/a

• Will the steps above reproduce in a fresh profile? If not what other info can be added?
  n/a

• Is this an issue in the currently released version?
  n/a

• Can this issue be consistently reproduced?
  n/a

• Extra QA steps:
  n/a.

• Screenshot if needed:
  n/a

• Any related issues:
  n/a