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

Question

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

我目前有一些输入容器，其中包含类似这样的选择和图标元素

<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 中定义的。

当您检查 md-icon 的版本 1.0.9 时，这不会出现：

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

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

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