From 0360eb8d05631e7c9f4905172986788f5daf9cdf Mon Sep 17 00:00:00 2001
From: Izak Filmalter <izak@steeple.ai>
Date: Sun, 29 Jan 2017 04:35:55 -0800
Subject: [PATCH] Add $input-icon-right-space var to add the correct spacing to
 the input based on Material Spec. (#1188)

https://material.io/guidelines/components/text-fields.html#text-fields-s
ingle-line-text-field
---
 components/input/config.css | 1 +
 components/input/theme.css  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/input/config.css b/components/input/config.css
index adfe89c9..58e389e5 100644
--- a/components/input/config.css
+++ b/components/input/config.css
@@ -17,6 +17,7 @@
   --input-icon-font-size: calc(2.4 * var(--unit));
   --input-icon-size: calc(2 * var(--input-icon-font-size));
   --input-icon-offset: calc(1.6 * var(--unit));
+  --input-icon-right-space: calc(2 * var(--unit));
   --input-chevron-offset: calc(0.8 * var(--unit));
   --input-hint-opacity: 1;
 }
diff --git a/components/input/theme.css b/components/input/theme.css
index 8f269d2c..512e25e9 100644
--- a/components/input/theme.css
+++ b/components/input/theme.css
@@ -9,7 +9,7 @@
   @apply --reset;
 
   &.withIcon {
-    margin-left: var(--input-icon-size);
+    margin-left: calc(var(--input-icon-size) + var(--input-icon-right-space));
   }
 }
 
@@ -18,7 +18,7 @@
   display: block;
   font-size: var(--input-icon-font-size) !important;
   height: var(--input-icon-size);
-  left: calc(-1 * var(--input-icon-size));
+  left: calc(-1 * (var(--input-icon-size) + var(--input-icon-right-space)));
   line-height: var(--input-icon-size) !important;
   position: absolute;
   text-align: center;