无法在最新版本的Angular Material上右对齐md-input-container内的md-icon

Question

我正在将应用程序从Angular Material 1.0.5升级到1.0.9

我目前有一些包含select和icon元素的输入容器，如此

<md-input-container class="md-icon-right" flex>
    <label>Something</label>
    <md-select ng-model="option2" flex>
            <md-option ng-repeat="option in options">
            </md-option>
        </md-select>
    <md-icon class="material-icons">X</md-icon>
</md-input-container>

所以这意味着我会将图标显示在选择输入的右侧。

升级到1.0.9后，使用与上面相同的标记，图标现在显示在左侧。

我已经查看了AM 1.0.9演示页面上的输入示例，我看不到版本中的任何内容发生了变化。

以下是1.0.5 - http://codepen.io/parky128/pen/rLWJNK

的外观

只需将材质脚本包含更改为1.0.9，您就会看到，实际上这是从1.0.6开始发生的。

请注意，使用md-select时，这似乎只是一个问题，常规输入不受此影响。

我无法在更改日志中看到任何重大更改，以说明为什么会发生这种情况。

任何人都知道在md-input-container中使用md-select为1.0.6版本时，如何让图标与右边对齐？

由于

Answer 1

如果您检查版本1.0.5的md-icon的CSS，您将看到以下内容：

md-input-container.md-icon-right>md-icon:last-of-type {
  margin: 0;
  right: 2px;
  left: auto;
}

这在 angular-material.min.css 中定义。

当您检查版本1.0.9的md-icon时，不会显示此内容：

如果您将上述CSS添加到您自己的CSS文件中，它将适用于版本1.0.9 - CodePen

另一件需要注意的是md-input-container向左移动。这可以通过以下CSS修复（在进一步检查之后）：

md-input-container.md-icon-right {
  padding-left: 0 !important;
}