无法在最新版本的 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 时的问题，常规输入不会受此影响。

我在他们的更改日志中看不到任何重大更改来说明为什么会发生这种情况。

有人知道在 1.0.6 及以上版本的 md-input-container 中使用 md-select 时如何使图标向右对齐吗？

谢谢

Answer 1

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

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;
}