title: Can you specify light or dark variant when attributing the primary/secondary color to an element?
body: <p>I am restyling my app to follow the Material UI Theme guidelines and would like to set the colour of a certain element to be the Light variant of my Primary colour. </p>
  
  <p>Is there a way to specify this via the <code>color</code> attribute?</p>
  
  <p>For example, this sets the element's colour to be the <code>main</code> variant of my Primary:</p>
  
  <pre><code>&lt;DeleteIcon color="primary" /&gt;
  </code></pre>
  
  <p>I attempted to guess the possible syntax for variations, such as:</p>
  
  <pre><code>&lt;DeleteIcon color="primary[100]"/&gt;
  &lt;DeleteIcon color="primary[light]"/&gt;
  &lt;DeleteIcon color="primary" shade="light"/&gt;
  &lt;DeleteIcon color="primary light"/&gt;
  </code></pre>
  
  <p>None of these have the desired effect.</p>
  
  <p>My Primary and Secondary colours are custom (I am not using any of the <code>@material-ui/core/colors/HUE</code> colours) and I've read the docs below, which is where some of my attempts came from:</p>
  
  <ul>
  <li><a href="https://material-ui.com/customization/default-theme/" rel="nofollow noreferrer">https://material-ui.com/customization/default-theme/</a></li>
  <li><a href="https://material-ui.com/style/color/" rel="nofollow noreferrer">https://material-ui.com/style/color/</a></li>
  </ul>
  
  <p>Is it possible to do what I am describing? Or do I have to use classes (which is how I'm currently doing styling, but trying to avoid) if I want to have granular control of the colour like this? </p>
  
  <p>Thanks in advance for your help!</p>