title: Stripe Elements Icon Padding Issue
body: <p>I'm using Stripe Elements on my site but running into some issues with the icon styling.
  I've done some searching and found this <a href="https://github.com/stripe/react-stripe-elements/issues/494" rel="nofollow noreferrer">link</a> but they have closed the ticket saying the issue was fixed.</p>
  <p>As you can see on my screenshot <a href="https://ibb.co/q5LRMHm" rel="nofollow noreferrer">here</a> the icon is flush to the edge and I'd like some padding to the left.</p>
  <p>I've tried adding padding via my JS like so but it doesn't change anything.</p>
  <pre><code>var style = {
      base: {
          iconColor: &quot;#fff&quot;,
          padding: &quot;5px 10px 5px 20px&quot;,
          backgroundColor: &quot;#a91537&quot;,
          color: &quot;#fff&quot;,
          fontWeight: &quot;400&quot;,
          fontFamily: &quot;Montserrat, sans-serif&quot;,
          fontSize: &quot;18px&quot;,
          lineHeight: &quot;80px&quot;,
          fontSmoothing: &quot;antialiased&quot;,
          showIcon: false,
          textIndent: &quot;10px&quot;,
          &quot;:-webkit-autofill&quot;: {
              color: &quot;#fff&quot;,
          },
          &quot;::placeholder&quot;: {
              color: &quot;#fff&quot;,
          },
      },
      invalid: {
          color: &quot;#fa775a&quot;,
          iconColor: &quot;#fa775a&quot;,
      },
  };
  </code></pre>
  <p>I've even tried adding it via CSS but because it's pulled in via an iframe my styling does nothing.</p>