title: Add custom color variables in angular material (2+)
body: <p>How to create "custom" own colors for <a href="https://material.angular.io/" rel="noreferrer">angular material</a>?</p>
  
  <p>For example the bootstrap like colors like <code>success</code> (green), <code>warn</code> (yellow), <code>danger</code> (red), beside <code>primary</code> (blue), <code>accent</code> (pink).</p>
  
  <p>In other words: Extend the color variablen of Angular Material (2+) for using it in html attributes:</p>
  
  <pre><code>&lt;button mat-raised-button color="success"&gt;Success&lt;/button&gt;
  </code></pre>
  
  <p>or create a white checkbox like:</p>
  
  <pre><code>&lt;mat-checkbox color="white"&gt;Check me!&lt;/mat-checkbox&gt;
  </code></pre>