title: How to style InputAdornment like notched OutlinedInput?
body: <p>I'm using React JS and Material UI framework.</p>
  
  <p>I need the adornment icon color inside a text field to behave like the border of the input.</p>
  
  <p>If you look at the <a href="https://codesandbox.io/s/material-demo-og1ms?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">example</a> from the documentation you can see that when:</p>
  
  <ul>
  <li>Hovering the input, the border will be wider and black</li>
  <li>Focusing the input, the border will be wider and have the primary color</li>
  </ul>
  
  <p>I found that these settings come from the styling given to the  <a href="https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/OutlinedInput/OutlinedInput.js" rel="nofollow noreferrer">component</a>.</p>
  
  <p>How can I apply these rules colors to the icon?</p>
  
  <p>Another related question- what is the easiest way to give  a color other than primary or secondary? Only by overriding the classes as described in the documentation?</p>