Color the VR omnibox security icons.

chrome/browser/resources/vr_shell/vr_shell_ui.css

Index: chrome/browser/resources/vr_shell/vr_shell_ui.css
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.css b/chrome/browser/resources/vr_shell/vr_shell_ui.css
index d48fa334e1917e0bd6fc75b4698786d207771ee0..f7242b0bf9acfa76ac39d6e4382d7ce5e3a5c6b5 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.css
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.css
@@ -100,15 +100,15 @@ html {
 }
 
 #back .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
+  background-image: url(images/back.svg);

[cjgrant, 2016/12/05 20:28:35]

The original line was resolved through html-flattening, which is now disabled. 
This lets us manipulate images through Javascript, as well as avoiding possible
size duplication (where we need the image file, and it gets embedded in the HTML
as well).

[bshe, 2016/12/05 21:08:38]

hmm. I think flattening would make loading slightly faster. When is the svg size
duplicated?

[cjgrant, 2016/12/05 22:10:17]

Example:  The "i in a circle" image is used inline by HTML, but also set
programmatically in Javascript (requiring a file).  I thought it'd be better to
not flatten, as our resources are loaded locally anyway.  I could be wrong here
though.

Prior to this, I experimented with making 3 different divs, each with an icon,
then using javascript to set which one is visible.  That seemed a lot more
cumbersome to me, but it works.

 }
 
 #reload .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_reload.svg);
+  background-image: url(images/reload.svg);
 }
 
 #forward .button {
-  background-image: url(../../../../ui/webui/resources/images/vr_back.svg);
+  background-image: url(images/back.svg);
   transform: scaleX(-1);
 }
 
@@ -151,7 +151,8 @@ html {
   max-width: 448px;
 }
 
-#omni .connection-security {
+#omni-icon {
+  flex: none;
   height: 50px;
   margin-right: 10px;
   width: 50px;