title: How to keep FluentUI SearchBox keep Icon as fixed?
body: <p>I am using SearchBox in my application. On click of searchbox the icon is hidden. I am looking for way to have it always. Can't find relevant property in IconProps which I can leverage</p>
  <p><a href="https://i.stack.imgur.com/xp83j.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xp83j.png" alt="enter image description here" /></a></p>
  <pre><code>import React, { useRef } from 'react';
  import { SearchBox } from '@fluentui/react/lib/SearchBox';
  import { Stack, IStackTokens } from '@fluentui/react/lib/Stack';
  
  const stackTokens: Partial&lt;IStackTokens&gt; = { childrenGap: 20 };
  const searchBoxRef = useRef();
  
  /* eslint-disable react/jsx-no-bind */
  export const SearchBoxFullSizeExample = () =&gt; {
    return (
      &lt;Stack tokens={stackTokens}&gt;
        &lt;SearchBox placeholder=&quot;Search&quot; onSearch={newValue =&gt; console.log('value is ' + newValue)} /&gt;
        &lt;SearchBox
          placeholder=&quot;Search with no animation&quot;
          onSearch={newValue =&gt; console.log('value is ' + newValue)}
          disableAnimation
         iconProps={{ iconName: 'Search', hidden: false, styles: { root: { display: 'block' }, componentRef:{searchBoxRef}  }  }}
       onClick={ () =&gt; searchBoxRef.hidden = false }
        /&gt;
      &lt;/Stack&gt;
    );
  };
  
  </code></pre>
  <p><a href="https://docs.microsoft.com/en-us/javascript/api/examples/searchbox?view=office-ui-fabric-react-latest" rel="nofollow noreferrer">https://docs.microsoft.com/en-us/javascript/api/examples/searchbox?view=office-ui-fabric-react-latest</a></p>