Solvedcomponents Weird ripple effect

Bug, feature request, or proposal:

[x] Bug

What is the expected behavior?

Expecting ripple effect on buttons

What is the current behavior?

On click ripple effect makes my button wide and ripple color appears like in image below

<button md-button md-ripple [md-ripple-color]="rippleColor" (click)="openSideNav($event)"  type="button"
                *ngIf="navigationUrl!=='/' && navigationUrl!=='/login'">
            <md-icon>menu</md-icon>
        </button>

Providing a Plunker (or similar) is the best way to get the team to see your issue.

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

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

Angular material alpha.7, chrome 52.0.2743.116 (64-bit) MacOS Sierra

Is there anything else we should know?

I'm trying to use the ripple effects on buttons am I missing something? I have my imports like this:

imports: [
        BrowserModule,
        MdCardModule,
        MdInputModule,
        MdIconModule,
        MdListModule,
        MdSidenavModule,
        MdToolbarModule,
        MdButtonModule,
        MdTabsModule,
        MdRippleModule,
        ReactiveFormsModule,
        MdMenuModule,
        FormsModule,
        RouterModule.forRoot([...routes], {})
    ]

I have got the same problem.

Each click of the bottom inserts a

<div class="md-ripple-foreground md-ripple-fade-in"
 style="left: -12.3584px; top: -17.7959px; width: 64.7168px;
 height: 64.7168px; transition-duration: 0.1s;
 background-color: rgba(255, 255, 255, 0.2);"></div>

Into my html, and it keeps stacking and never goes away.

+1
I'm experiencing exactly the same thing.
And I only have 2 things: toolbar and button
The button is inside the toolbar. Not sure if that matters or not.
But what definitely matters is that from the beginning, the ripple works as expected inside the button, but if you click on the button, then the ripple area become really big.

Also you can just disable ripple for a while

<button md-mini-fab [disableRipple]="true">
    <md-icon>add</md-icon>
</button>

@jelbourn @dozingcat also md-ripple is creating scroll on my page after several clicks. I think this the cause.

The problem may be that the ripples depend on styles in core.css, which needs to be included in the page (for example https://github.com/angular/material2/blob/master/src/demo-app/index.html#L17 in the demo app). @jelbourn was there going to be a way to automatically include this?