Try the following code:

试试下面的代码：

<form layout layout-align="center" layout-padding>
    <div layout="row" flex>
        <md-input-container flex class="md-icon-float md-block md-title">
            <label>Your font number</label>
            <!-- below is the material icons -->
            <md-icon class="material-icons">phone</md-icon>
            <input type="text">
        </md-input-container>
        <div>
            <md-button class="md-raised">
            <!-- below is the material icons -->
                <md-icon class="material-icons">search</md-icon>
            </md-button>
        </div>
    </div>  
</form>

see a sample in the following link http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

在以下链接中查看示例 http://codepen.io/cmwang-cottageclothing/pen/BjpdVQ?editors=1000

Would like to provide a contemporary answer to this popular question.

想为这个流行的问题提供一个当代的答案。

1. Use [matSuffix] on the button

1.在按钮上使用[matSuffix]

Angular Material got you back on that one and provide matSuffixdirective to place an element at the end of the form field.

Angular Material 让你回到那个，并提供matSuffix指令在表单字段的末尾放置一个元素。

Hence, your solution would look like:

因此，您的解决方案如下所示：

  <mat-form-field>
    <mat-placeholder>Search reports</mat-placeholder>
      <input matInput type="search">
      <button mat-button matSuffix mat-stroked-button aria-label="search">
        <mat-icon>search</mat-icon>
    </button>
  </mat-form-field>

See the full code of the example at https://stackblitz.com/edit/angular-mvndsv.

在https://stackblitz.com/edit/angular-mvndsv查看示例的完整代码。

2. Make mat-form-field to fill the width

2.使mat-form-field填充宽度

To fulfil the width of the parent element, alter the style of mat-form-field:

要满足父元素的宽度，请更改 的样式mat-form-field：

mat-form-field.mat-form-field {
  width: 100%;
}

3. Use CSS 'flex' properties, not @angular/flex-layoutdirectives

3. 使用 CSS 'flex' 属性，而不是@angular/flex-layout指令

For big project, I'd recommend to use flex CSS propertiesand avoid using flexdirectives from @angular/flex-layoutpackage.

对于大型项目，我建议使用flex CSS 属性并避免使用flex来自@angular/flex-layout包的指令。

While at the first glance, it may look handy to put a flex directive, rather than writing CSS styles, it will backfire on a bigger projects once the project start growing and you build your CSS classes and mixins and start extending them in the components:

虽然乍一看，放置 flex 指令似乎很方便，而不是编写 CSS 样式，但一旦项目开始增长并且您构建 CSS 类和 mixin 并开始在组件中扩展它们，它就会适得其反：

1. 'flex' directives would bring ambiguity on where the style properties get applied from.
2. Debugging issues requires understanding the actual CSS flex properties, as you see/manipulate them in the browser's developer tools. So using the 'flex' directives:
   • would require devs to understand how the directive's properties get converted to the CSS;
   • and once they've got working CSS they have to manually convert it to directives, which introduces another point of failure.

1. 'flex' 指令会使样式属性的应用位置变得模糊。
2. 调试问题需要了解实际的 CSS flex 属性，正如您在浏览器的开发人员工具中看到/操作的那样。所以使用“flex”指令：
   • 需要开发人员了解指令的属性如何转换为 CSS；
   • 一旦他们有了可用的 CSS，他们就必须手动将其转换为指令，这会引入另一个失败点。

In angular material you can do this by multiple way, one of the way by ::ng-deep overriding style. For alignment of group input and button you can use flex boxes or table.

在有角度的材料中，您可以通过多种方式做到这一点，其中一种方式是 ::ng-deep 覆盖样式。对于组输入和按钮的对齐，您可以使用弹性框或表格。

In component.html

在 component.html

<div fxFlex="40%">
    <mat-form-field floatLabel="auto" hideRequiredMarker appearance="outline">
         <mat-label>Search</mat-label>
         <input matInput type="text">                                                 
    </mat-form-field>
</div>
<div fxFlex="20%">
    <button mat-flat-button color="accent" type="button">Search</button>
</div>

In component.scss or css

在 component.scss 或 css 中

mat-form-field {
    width: 100%;        
    input {
        width: 100%;
        caret-color: black; 
    }
}
button {
    margin-top: 4px;
    height: 60px;
    border-radius: 0px 4px 4px 0px;
    padding-left: 30px;
    padding-right: 30px;
    background-color: white;
    color: black;
}

::ng-deep .mat-form-field-appearance-outline {
    color: black !important;
    .mat-form-field-outline-end {
        border-radius: 0px !important;
    }
}
::ng-deep .mat-form-field-outline {
    color: black !important;
    border-radius: 4px 0px 0px 4px !important;
}
::ng-deep .mat-form-field-outline-thick {
    color: black !important;
}