Angular Material 无论您对它做什么,图标显然都不会对齐?尽管 Flex Layout 指令和 CSS 会影响它,但它永远不会对齐
Angular Material Icon clearly won't align no matter what you do to it? Although Flex Layout directives and CSS affect it, it's just never aligned
示例:https://i.imgur.com/Xd0XkmE.png
我已经在父级上尝试了 fxFlexAlign - fxLayoutAlign,给它一个 ID 并使用 display:flex + justify-content:center 和 !important 一切。
事情是 -- 以上所有的事情都对它做了一些事情,它对 CSS 和 FlexLayout 指令做出反应,但无论如何它看起来仍然明显错位。
经过检查,很明显它是从 'container' 的右下角生长的,根本不关心以任何方式对齐。
我在处理这些问题时是否遗漏了什么?我查看了文档 + Whosebug + 谷歌搜索但找不到任何东西。
最终将所有内容都更改为带有 svg 图标的超赞字体,导入每个图标有点乏味,但保持包很小并且不能真正与 svg 的价值争论。我在未来十年内不会触摸 material 个图标。
您在发布的答案的评论中提到您正在更改字体大小并触发了问题。我 认为 我记得注意到一个错误 - 至少我知道我已经 运行 了。除了字体大小,您还需要相应地调整宽度和高度。实际上,最好定义 类 来处理所有这些并将它们应用于 mat-icon 元素。例如:
.mat-icon-16 {
font-size: 16px;
width: 16px;
height: 16px;
}
<mat-icon class="mat-icon-16">help<mat-icon>
请注意,行高也有影响,但默认情况下它是“1”,因此您不需要更改它。
示例:https://i.imgur.com/Xd0XkmE.png
我已经在父级上尝试了 fxFlexAlign - fxLayoutAlign,给它一个 ID 并使用 display:flex + justify-content:center 和 !important 一切。
事情是 -- 以上所有的事情都对它做了一些事情,它对 CSS 和 FlexLayout 指令做出反应,但无论如何它看起来仍然明显错位。
经过检查,很明显它是从 'container' 的右下角生长的,根本不关心以任何方式对齐。
我在处理这些问题时是否遗漏了什么?我查看了文档 + Whosebug + 谷歌搜索但找不到任何东西。
最终将所有内容都更改为带有 svg 图标的超赞字体,导入每个图标有点乏味,但保持包很小并且不能真正与 svg 的价值争论。我在未来十年内不会触摸 material 个图标。
您在发布的答案的评论中提到您正在更改字体大小并触发了问题。我 认为 我记得注意到一个错误 - 至少我知道我已经 运行 了。除了字体大小,您还需要相应地调整宽度和高度。实际上,最好定义 类 来处理所有这些并将它们应用于 mat-icon 元素。例如:
.mat-icon-16 {
font-size: 16px;
width: 16px;
height: 16px;
}
<mat-icon class="mat-icon-16">help<mat-icon>
请注意,行高也有影响,但默认情况下它是“1”,因此您不需要更改它。