Ability to set more than just primary 500, accent 500 or warn 500 as button colors

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

It would be nice to be able to specify a color level from a specified palette to a button using the color attribute. I sometimes want to be able to make a FAB primary 400 or something like that

What is the current behavior?

You can set a button to primary, accent, or warn and the button component picks the 500 level of that palette

What are the steps to reproduce?

Providing a Plunker (or similar) is the best way to get the team to see your issue. Plunker template: https://goo.gl/DlHd6U

What is the use-case or motivation for changing an existing behavior?

We don’t always want to use the 500 level of our palettes for styling buttons or other components

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular material beta 8

Is there anything else we should know?

[bradringel]

Interesting, didn’t know that it only used the default. I’m not sure that would solve this issue though because I do want most of the components to be styled using 500, but it would be nice to choose another color for one or two things in certain situations. Currently I’m just overriding the color by defining a style for .mat-fab.mat-primary in the component where the fab is used and setting the color there. That will probably break at some point either due to selector name changes or shadow DOM stuff

[willshowell]

@bradringel I don’t know why this didn’t occur to me before:

You can create two themes (see the part about multiple themes), like $my-main-theme, and $my-secondary-theme. In the secondary one, use alternate palette colors (like indigo-400 for primary).

Then just wrap your FAB or whatever with that class

.my-secondary-theme {
  @include angular-material-theme($my-secondary-theme);
}

<div class="my-secondary-theme"><button md-fab>...</button></div>