Components: Inconsistent checkbox styles

[tinybigideas]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Consistent checkbox style

What is the current behavior?

mat-checkbox

mat-tree

mat-selection-list

mat-selection-list checkbox styles are slightly inconsistent. Only obvious when side by side with another source.

What are the steps to reproduce?

See:
https://material.angular.io/components/checkbox/overview
vs
https://material.angular.io/components/list/overview#selection-lists

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

Consistency

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

Angular 7, Material 7, Linux, Chrome/Firefox

Is there anything else we should know?

Nope. Super low priority, but worth mentioning.

[crisbeto]

The reason is that we have two checkboxes: mat-checkbox that comes with all the behavior, animations, accessibility etc. and mat-pseudo-checkbox which is CSS-only and intended only for presentation. After we reduced the sizes of checkbox, they ended up rendering slightly differently, because one uses SVG and the other one is pure CSS.

[thomas-parrish]

But both checkboxes are used in forms, and when they are used within the same form, it's extremely noticeable. Also, pseudo-checkboxes do not support the necessary features that would allow us to replace actual checkboxes with them (such as indeterminate state.) In our case, we have a multi-select with a select all feature, and it looks ridiculous now because of this change.

[Angelinsky7]

i've got the same effect as @thomas-parrish but in a simple mat-selection-list without doing nothing special

[stot3]

Yea, it's looking worse and worse, not the checkboxes are virtually impossible to look at, there has to be a better way, then completely separate components, that look the same but doing completely different things