bug(mat-icon-button/radio-button/checkbox): Unable to reduce ripple size

[surenlancer7]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.x

Description

For a button of any size, the default ripple size is displayed.

In certain scenarios, we need to fit in the button in smaller UI. As the ripple effect is taking more space than the button, it is creating a UI glitch. If we reduce the size of button, still the ripple effect is taking unwanted space and hence I had to redesign the application.

Is there any way to override the ripple size "THROUGH CSS" as the other option (density) is not working as expected for our use cases

Reproduction

Reference - https://stackblitz.com/edit/angular-rumxmw?file=src%2Fapp%2Fbutton-overview-example.html

Expected Behavior

The ripple effect also should be relative to the button

Actual Behavior

The ripple effect is not relative to the button

Environment

Angular CLI: 15.2.4 Node: 16.15.0 Package Manager: npm 8.5.5 OS: win32 x64

 

Angular: 15.2.4 ... animations, cdk, cli, common, compiler, compiler-cli, core ... elements, forms, language-service, material ... material-moment-adapter, platform-browser ... platform-browser-dynamic, router

 

Package                         Version

@angular-devkit/architect       0.1502.4 @angular-devkit/build-angular   15.2.4 @angular-devkit/core            15.2.4 @angular-devkit/schematics      15.2.4 @angular/flex-layout            15.0.0-beta.42 @schematics/angular             15.2.4 ng-packagr                      15.2.2 rxjs                            7.8.0 typescript                      4.9.5

[crisbeto]

Why doesn't the density mixin work for you? It is the intended public API for cases like this.

[thirumurugan-sundaram]

Why doesn't the density mixin work for you? It is the intended public API for cases like this.

we are able to provide the density value from -2 to +2 only via mixin. We are trying to reduce the size of the ripple from 48px to 24px which is equivalent to -5 and the density is not allowed by angular theming. Hence we are trying manually via CSS

[crisbeto]

The density scale is based on the Material Design spec so that's why it's capped at those values. I was able to get the button to be 24x24 with the following styles. Note that doing this is at your own risk since the internal implementation of the buttons can change:

--mdc-icon-button-state-layer-size: 24px;
--mdc-icon-button-icon-size: 24px;
padding: 0;

.mat-mdc-icon-button .mat-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

[thirumurugan-sundaram]

we are able to restrict the button size and font size even the ripple size with the above styles, but the mat-icon is positioned outside the button element

[crisbeto]

Are you sure that you're applying all the styles I mentioned above? Here's what the button looks like for me:

[thirumurugan-sundaram]

we are not utilizing any mixin , directly applying the styles in .scss files

where would you add the below styles, for which class or element we are supposed to provide it --mdc-icon-button-state-layer-size: 24px; --mdc-icon-button-icon-size: 24px; padding: 0;

can you share the styles override as a working scss / css format with selectors

[crisbeto]

It's likely a specificity issue. You should apply it to the .mat-mdc-button and verify in the dev tools that something else isn't overriding it.

[crisbeto]

Closing since there hasn't been any activity and there are some suggestions above.

[angular-automatic-lock-bot[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.}