title: How to display Icons with the styled-component icons that are hidden even after being inserted into the component? (GATSBY)
body: <p>I'm trying to show the icons in the aside. Below is the styled-components code and the way in which its logic was organized but the icons are not being shown by default.  a curious behavior is that if I write anything directly next to the icon component it start to display it but in different sizes.</p>
  
  <p>MenuBar Component</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  
  
  import { Home } from '@styled-icons/material-rounded/Home'
  import { Search } from '@styled-icons/icomoon/Search'
  import { Lightbulb } from '@styled-icons/fa-solid/Lightbulb'
  import { Grid } from '@styled-icons/boxicons-solid/Grid'
  import { ToTop } from '@styled-icons/boxicons-solid/ToTop'
  
  import * as S from './styled'
  
  const MenuBar = () =&gt; (
    &lt;S.MenuBarWrapper&gt;
      &lt;S.MenuBarGroup&gt;
        &lt;S.MenuBarLink to="/" title="Back to Home"&gt;
          &lt;S.MenuBarItem&gt;&lt;Home /&gt;&lt;/S.MenuBarItem&gt;
        &lt;/S.MenuBarLink&gt;
        &lt;S.MenuBarLink to="/search/" title="Search"&gt;
          &lt;S.MenuBarItem&gt;&lt;Search /&gt;&lt;/S.MenuBarItem&gt;
        &lt;/S.MenuBarLink&gt;
      &lt;/S.MenuBarGroup&gt;
      &lt;S.MenuBarGroup&gt;
        &lt;S.MenuBarItem title="Change Theme"&gt;&lt;Lightbulb /&gt;&lt;/S.MenuBarItem&gt;
        &lt;S.MenuBarItem title="Change Visualization"&gt;&lt;Grid /&gt;&lt;/S.MenuBarItem&gt;
        &lt;S.MenuBarItem title="Go to Top"&gt;&lt;ToTop /&gt;&lt;/S.MenuBarItem&gt;
      &lt;/S.MenuBarGroup&gt;
    &lt;/S.MenuBarWrapper&gt;
  )
  
  export default MenuBar
  </code></pre>
  
  <p>styled.js</p>
  
  <pre><code>import styled from 'styled-components'
  import { Link } from 'gatsby'
  
  export const MenuBarWrapper = styled.aside`
    align-items: center;
    background: #192734;
    border-left: 1px solid #38444d;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: space-between;
    padding: 0.8rem 0;
    position: fixed;
    right: 0;
    width: 3.75rem;
  `
  
  export const MenuBarGroup = styled.div`
    display: flex;
    flex-direction: column;
  `
  
  export const MenuBarLink = styled (Link)`
    display: block;
  `
  export const MenuBarItem = styled.span`
    display:block;
    color: #8899a6;
    cursor: pointer;
    height: 3rem;
    padding: 1.1rem;
  `
  
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/5CPZQ.png" rel="nofollow noreferrer">MenuBar aside without showing icons</a></p>
  
  <p>When i type some text near the component:</p>
  
  <p><a href="https://i.stack.imgur.com/sL5y7.png" rel="nofollow noreferrer">MenuBar aside showing icons</a></p>