title: In Ant Design, how can we center an icon vertically in <Row>?
body: <p>Please see my React code example:</p>
  <pre><code>import { Row, Col, Icon } from 'antd';
  const MyRow = () =&gt; (
    &lt;Row align=&quot;middle&quot;&gt;
      &lt;Col md={10}&gt;Trouble is a friend&lt;/Col&gt;
      &lt;Col md={10}&gt;&lt;Icon type=&quot;play-circle-o&quot; /&gt;&lt;/Col&gt;
      &lt;Col md={4}&gt;&lt;div&gt;Lenka&lt;/div&gt;&lt;/Col&gt;
    &lt;/Row&gt;
  );
  
  ...
  </code></pre>
  <p>When I rendered <code>&lt;MyRow /&gt;</code>, I found that the text in <code>&lt;Row&gt;</code> was centered vertically well, but the <code>&lt;Icon&gt;</code> component didn't do so. So that my <code>&lt;MyRow&gt;</code> didn't look good. I expected all the content, not only the text but also the <code>SVG</code> in <code>&lt;Row&gt;</code> could be centered vertically.</p>
  <p>I also tried other icon library, e.g. <code>react-icons-kit</code>, which did not work.</p>
  <p>Does anyone have an idea?</p>