Angular Material way of making a horizontal line with word in the middle

A nice way to do it is to use the layout="row" along with flex.

<span layout="row"><hr flex/>or<hr flex/></span>

JS fiddle applying this idea to the button text: http://jsfiddle.net/a7m6xrwy/1/

You can style the hr attribute with css. The md-divider directive isn't meant to be used this way, so there is no reason to try and force it. If you wish to use a directive to solve this issue, you will have to write your own md-divider directive which takes the display text as a parameter.

For people using angular material 2 and flex-layout, here's my solution. Not entirely satisfactory, but it does the trick.

<div fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="5px">
  <mat-divider fxFlex="1 0"></mat-divider>
  <div>or</div>
  <mat-divider fxFlex="1 0"></mat-divider>
</div>

Here is a solution using material's mat-divider:

<h1>Divider with text</h1>

<div class="container">
  <div class="line"><mat-divider></mat-divider></div>
  <div class="text mat-typography">Hey there</div>
  <div class="line"><mat-divider></mat-divider></div>
</div>

.container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.line {
  flex: 1;
}

.text {
  padding-left: 10px;
  padding-right: 10px;
}

The result will look like this: