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

#### What are the steps to reproduce?

<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], {})
    ]

[colinfang]

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.

[sunshineo]

+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.