title: Error when using Custom Icon for Switch Component
body: <p>When I try to use the custom icon prop I get this error:
  index.js:1406 Warning: Failed prop type: Invalid prop <code>icon</code> supplied to <code>ForwardRef(Switch)</code>, expected a ReactNode.</p>
  
  <p>I have tried several things and I cannot make it work. Any ideas why it is not working?</p>
  
  <pre><code>&lt;Switch
    checked={formik.values.roleBasedAccess}
    onChange={handleRoleBasedChange}
    icon={HexagonSwitch}
    value="roleBasedAccess"
  /&gt;
  </code></pre>
  
  <p>And the HexagonSwitch component:</p>
  
  <pre><code>import React from 'react';
  
  const HexagonSwitch = () =&gt; {
          return (
              &lt;svg width="24px" height="21px" viewBox="0 0 24 24"&gt;
                  &lt;g id="Add-on/Guided-Workflow/Pieces/Status-Indicator/Complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"&gt;
                      &lt;polygon id="Polygon" fill="red" fill-rule="nonzero" points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5"&gt;&lt;/polygon&gt;
                  &lt;/g&gt;
              &lt;/svg&gt;
          );
  };
  </code></pre>