Why do some angular material color inputs have a color input, and others do not? - angular-material

Question

Components like button, toolbar allow for a color input like <button color="primary">, which is handy because it automatically updates the color of the text inside. But when I just wne to color a component with color, I realized that it doesn't allow for a color input.
Browsing briefly through the marterial component docs, it seems to me entirely random whether a component accepts a color input or not. Is there any rhyme or reason to this? I'd be much happier if every component could have a color input.

Answer 1

OK, I had not internalized (but now understand) that, under material design, there are many parts of an interface that you are simply discouraged to color (roughly speaking the 'body' of your content), and that these not-to-be-colored parts are made greyscale (light or dark depending on your theme). To-be-colored items tend to be banners, navigators, buttons, etc.
I found it instructive to go through the list of components and put each one into one of two lists depending on whether they allow for a color directive:
DO HAVE COLOR DIRECTIVE:
mat-checkbox
mat-datepicker
mat-form-field
mat-radio-group
mat-radio-button
mat-slider
mat-slide-toggle
mat-toolbar
mat-list-option
mat-selection-list
mat-tab-nav-bar (<nav mat-tab-nav-bar [backgroundColor]="background">)
mat-tab-group
mat-button (<button mat-button>Basic</button>)
matBadge (<span matBadge="4" matBadgeColor="accent">Text with a badge</span>)
mat-chip
mat-icon
mat-spinner
mat-progress-spinner
mat-progress-bar
matRipple (<div matRipple [matRippleColor]="myColor"></div>)
mat-paginator
DO NOT HAVE COLOR DIRECTIVE:
mat-autocomplete
matInput (<input matInput>)
mat-select
mat-menu
mat-drawer-content
mat-drawer
mat-drawer-container
mat-sidenav-content
mat-sidenav
mat-sidenav-container
mat-toolbar-row
mat-card
mat-divider
mat-accordion
mat-expansion-panel
mat-action-row
mat-expansion-panel-header
mat-grid-list
mat-grid-tile
mat-grid-tile-header
mat-grid-tile-footer
mat-nav-list
mat-list
mat-list-item
mat-horizontal-stepper
mat-step
mat-tab
mat-tree-node
mat-tree
mat-button-toggle-group
mat-button-toggle
mat-chip-list
MatBottomSheet
MatDialog
MatSnackBar
matTooltip
MatSortHeader
MatTable
Note: some of these are not compnents, per say, but are activated by e.g. a directive. In some (not all!) cases, I included in brackets how that 'component' is used.