title: How to align icon to the left and text to the center by using flex?
body: <p>I know flex is very useful these days and I'm also a fan of using flex.</p>
  
  <p>For my project, I'm trying to align icon to the left and text to the center by using flex but it's not working. </p>
  
  <p>How to align center for the text when putting icon to the left?</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>.window-recommendation {
    background-color: #262931;
    width:100%;
    height:100vh;
    overflow:auto;
    position:relative;
    transform:translateX(0);
    transition:all 0.3s;
  }
  
  
  .top-recommendation {
    display: flex;
    height:50px;
    align-items: center;
    justify-content: space-between;
  }
  
  .top-artist {
    background-color: #FFF;
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Omnibag Project&lt;/title&gt;
    &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
    &lt;link href="assets/css/style.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="window-recommendation"&gt;
    &lt;div class="top-recommendation top-artist"&gt;
            &lt;i class="material-icons main-left-arrow-artist"&gt;keyboard_arrow_left&lt;/i&gt;
            &lt;div class="grid-item-artist"&gt;Profile&lt;/div&gt;
    &lt;/div&gt;
          
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>