[NTP] Use correct icons for background options

Add icons as SVG files, and update the css to use the new icons.

chrome.svg: monochrome Chrome logo
photos.svg: Google Photo's logo
upload.svg: upload arrow
wallpapers.svg: Chrome wallpapers logo

Bug: 851336
Cq-Include-Trybots: luci.chromium.try:closure_compilation
Change-Id: Ie4e724144c0889b70cbed1905e9ca86cd1c88d86
Reviewed-on: https://chromium-review.googlesource.com/1109598Reviewed-by: Michael Giuffrida <michaelpg@chromium.org>
Reviewed-by: Marc Treib <treib@chromium.org>
Commit-Queue: Kyle Milka <kmilka@chromium.org>
Cr-Commit-Position: refs/heads/master@{#569639}

chrome/browser/resources/local_ntp/chrome.svg

+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
+  <defs>
+    <path id="chrome_16dp-a" d="M8,5.3 L13.34,5.3 C12.38,3.32 10.34,2 8,2 C6.14,2 4.46,2.84 3.38,4.16 L5.36,7.58 C5.54,6.32 6.68,5.3 8,5.3 L8,5.3 Z M8,10.7 C6.98,10.7 6.14,10.16 5.66,9.32 L2.96,4.7 C2.36,5.66 2,6.8 2,8 C2,11 4.16,13.46 7.04,13.94 L9.02,10.52 C8.66,10.64 8.36,10.7 8,10.7 L8,10.7 Z M10.7,8 C10.7,7.16 10.28,6.38 9.68,5.9 L13.64,5.9 C13.88,6.56 14,7.28 14,8 C14,11.3 11.3,14 8,14 L7.64,14 L10.34,9.32 C10.58,8.96 10.7,8.48 10.7,8 Z M8,10.1 C6.84020203,10.1 5.9,9.15979797 5.9,8 C5.9,6.84020203 6.84020203,5.9 8,5.9 C9.15979797,5.9 10.1,6.84020203 10.1,8 C10.1,9.15979797 9.15979797,10.1 8,10.1 Z"/>
+  </defs>
+  <g fill="none" fill-rule="evenodd">
+    <use fill="#000" xlink:href="#chrome_16dp-a"/>
+  </g>
+</svg>

chrome/browser/resources/local_ntp/custom_backgrounds.css

@@ -79,7 +79,6 @@
 }
 
 .bg-option-img {
-  background: url(../../../../ui/webui/resources/images/settings.svg) no-repeat center;
   background-size: 24px 24px;
   display: inline-block;
   height: 24px;
@@ -90,6 +89,24 @@
   width: 24px;
 }
 
+#edit-bg-google-photos .bg-option-img {
+  background: url(photos.svg) no-repeat center;
+}
+
+#edit-bg-default-wallpapers .bg-option-img {
+  background: url(wallpapers.svg) no-repeat center;
+}
+
+#edit-bg-upload-image .bg-option-img {
+  background: rgb(241, 243, 244) url(upload.svg) no-repeat center;
+  border-radius: 50%;
+}
+
+#edit-bg-restore-default .bg-option-img {
+  background: rgb(241, 243, 244) url(chrome.svg)  no-repeat center;
+  border-radius: 50%;
+}
+
 .bg-option-text {
   display: inline-block;
   line-height: normal;

chrome/browser/resources/local_ntp/upload.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <g fill="none" fill-rule="evenodd">
+    <polygon fill="#000" fill-rule="nonzero" points="3 12 3 14 13 14 13 12"/>
+    <polygon fill="#000" points="13 6.154 10.01 6.154 10.01 2 6.014 2 6.014 6.154 3 6.154 8 11" transform="rotate(-180 8 6.5)"/>
+  </g>
+</svg>