mat-checkbox resize and ripple effect doesn't work well

[yajneshrai]

Bug, feature request, or proposal:

Bug/Feature request

What is the expected behavior?

Allow resizing of checkbox and have proper ripple effect on resized element

What is the current behavior?

• No way to resize the element, other than tweaking width and height in px
• Even after resizing, ripple effect on click does not come up from center

What are the steps to reproduce?

Update the style to following:

.mat-checkbox-inner-container {
    height: 10px !important;
    width: 10px !important;
}

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

• When the entire page is using a consistent font-size, having a bigger checkbox makes it look odd.
• And if the mat-checkbox was made smaller, ripple effect originates from top-left which looks bad

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

Currently using "@angular/material": "^5.0.2", although issue existed right from beginning

Is there anything else we should know?

None

[tinayuangao]

The ripple size & radius are configured in checkbox css file: https://github.com/angular/material2/blob/master/src/lib/checkbox/checkbox.scss#L414

[onstottj]

Is there a way to style it without editing the internal CSS file? I'm pulling this in via npm. Setting up the style in my global stylesheet doesn't seem to work (I bet view encapsulation is the issue with that).

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}