title: How to align icon left and text centred in a html button?
body: <p>How can you have a button with an icon that is aligned left (far left in the button) and the text still centred in the button?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.GoogleSignIn{
      border-radius: 50px;
      padding: 10px;
      text-align: center;
      align-items: center;
      width: 100%;
      height: 42px;
      font-size: 14px;
      font-weight: 500;
      background-color: white;
      border: none;
      color: black;
      margin-bottom: 10px;
      cursor: pointer;
      outline: none;
      display: flex;
      /* justify-content: center; */
  }
  .GoogleIcon{
      margin: -40px 0px -12px -440%;
  }
  .GoogleIconContainer{
      align-self: flex-end;
      display: flex;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button className={classes.GoogleSignIn}&gt;
                      &lt;div className = {classes.GoogleIconContainer}&gt;
                          &lt;img src={GoogleIcon} className = {classes.GoogleIcon}/&gt;
                      &lt;/div&gt;
                      Sign in with google
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>