Use svg icon to avoid lazy loading of Polymer elements for user pods

ui/login/account_picker/user_pod_row.css

 /* Copyright 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  *
  * This is the stylesheet used by user pods row of account picker UI.
  */
 
 podrow {
   /* Temporarily disabled because animation interferes with updating screen's
    size. */
@@ skipping 356 matching lines @@
 }
 
 .pod[auth-type='onlineSignIn'] .reauth-hint-container {
   display: flex;
   margin-top: 8px;
   width: 100%;
   justify-content: center;
 }
 
 .reauth-hint-container .reauth-warning {
-  color: #f4b400;
-  display: inline-flex;
+  -webkit-mask-image: url(../../../ui/webui/resources/images/warning.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size: 20px;

[Dan Beam, 2016/05/26 00:35:11]

can we use a shorthand for this, i.e.

-webkit-mask: url(../../../ui/webui/resources/images/warning.svg) center
no-repeat 20px;

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

[Moe, 2016/05/26 13:36:49]

I tried it. Using the shorthand somehow the image doesn't get converted to Data
URI. very strange!

+  background-color: #f4b400;
+  height: 24px;
+  width: 24px;
 }
 
 .reauth-hint-container .reauth-name-hint {
   align-self: center;
   color: #565656;
   font-size: 16px;
   outline: none;
   overflow: hidden;
   padding: 0 6px;
   text-align: center;
@@ skipping 432 matching lines @@
   -webkit-animation: ellipsis-component2 1.5s infinite;
 }
 
 @-webkit-keyframes ellipsis-component2 {
   0% { opacity: 0; }
   25% { opacity: 0; }
   50% { opacity: 0; }
   75% { opacity: 1; }
   100% { opacity: 0; }
 }