"Error: No provider for Overlay!"

You should do MaterialModule.forRoot() (see the UPDATE2) that should fix the issue.

FYI That is the base maerial2 setup:

import { MaterialModule, MdIconRegistry, } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot()
  ],
  providers: [MdIconRegistry],
  bootstrap: [AppComponent]
})
export class AppModule { }

See more details here http://iterity.io/2016/10/01/angular/getting-started-with-angular-material-2/

UPDATE1: The official material2 doc has being updated so you might look in to this as well https://material.angular.io/guide/getting-started

UPDATE2: In the latest material2 (from 2.0.0-beta.2 and up) no need to use MaterialModule.forRoot() any more just use MaterialModule instead.

The use of Module forRoot has been deprecated and will be removed in the next release. Instead, just simply import MaterialModule directly:

@NgModule({
    imports: [
        ...
        MaterialModule,
        ...
    ]
...
});

UPFATE3: Starting from version 2.0.0-beta.8 angular material depends on @angular/cdk so you need npm install that as well.

For @angular/material version 6 and beyond: import OverlayModule in your root module (e.g. in app.module.ts). Importing in lazy-loaded module doesn't work! Details: https://github.com/angular/material2/issues/10820#issuecomment-386733368

I managed to eliminate this error by adding this to app.module.js:

import {OVERLAY_PROVIDERS} from "@angular/material";

@NgModule({
  imports: [...
  ],
  declarations: [...],
  providers: [OVERLAY_PROVIDERS],
  bootstrap: [...]
})

---

Edit (May 2018):

OVERLAY_PROVIDERS is now deprecated. use the OverlayModule instead

import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  imports: [
      OverlayModule
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [...]
})