[Passwords] Unify leak check icon sizes

This CL ensures that the icons align exactly with our mocks:
- the blue icon is filled instead of only a blue checkmark
- the red warning triangle has a light-red halo
- the spinner has the same size as the icons

Additionally, the sum of paddings, margins and sizes is now constant for
all icons which ensures that the title doesn't jump when icons change.

Find screenshots in https://crbug.com/1047726#c50

Bug: 1047726
Change-Id: I4c96bf197d6b670ff2b1788ff5f2b8ce493212fe
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2096744Reviewed-by: Jan Wilken Dörrie <jdoerrie@chromium.org>
Commit-Queue: Friedrich [CET] <fhorschig@chromium.org>
Cr-Commit-Position: refs/heads/master@{#748818}

chrome/browser/resources/settings/autofill_page/password_check.html

@@ -17,15 +17,27 @@
     <style include="settings-shared">
       iron-icon,
       #progressSpinner {
+        --paper-spinner-stroke-width: 2px;
+        height: 16px;
         padding-inline-end: 20px;
+        width: 16px;
       }
 
       iron-icon.has-leaks {
         --iron-icon-fill-color: var(--google-red-600);
+        background: radial-gradient(circle 12px at 12px,
+                                    #FCE8E6 100%,
+                                    transparent 100%);
+        margin-inline-start: -4px;
+        padding-bottom: 4px;
+        padding-inline-end: 20px;
+        padding-inline-start: 4px;
+        padding-top: 4px;
       }
 
       iron-icon.no-leaks {
         --iron-icon-fill-color: var(--google-blue-600);
+        background-size: 16px 16px;
       }
 
     </style>

chrome/browser/resources/settings/autofill_page/password_check.js

@@ -199,7 +199,7 @@ Polymer({
    */
   getStatusIcon_(status, leakedPasswords) {
     if (!this.hasLeaksOrErrors_(status, leakedPasswords)) {
-      return 'cr:check';
+      return 'settings:check-circle';
     }
     if (this.hasLeakedCredentials_(leakedPasswords)) {
       return 'cr:warning';