Angular 16: How do I change the size of an Angular Material checkbox (MDC)?

Question

In Material, which is now considered legacy, I can set the size of the checkbox as follows:

.mat-checkbox-frame {
  width: 1.5rem;
}

How can I achieve the same effect in MDC?

Answer 1

To change the size of the checkbox, add the following CSS code in styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
}

However, if you want to use the default ripple effect, this is only half the solution. Now you also need to align the checkbox so that it fits perfectly within the circle of the ripple effect. Please add the following CSS code in styles.scss:

.mdc-checkbox__background {
  width: 1.5rem !important;
  height: 1.5rem !important;
  top: 50% !important; /* 添加 */
  left: 50% !important; /* 添加 */
  transform: translate(-50%, -50%) !important; /* 添加 */
}

Please refer to Real-time Demonstration.