Material-UI Icon 元素裁剪 FontAwesome 图标答案

【问题标题】：Material-UI Icon element cropping FontAwesome iconMaterial-UI Icon 元素裁剪 FontAwesome 图标
【发布时间】：2020-06-15 10:08:18
【问题描述】：

我正在使用带有 Font Awesome 图标的 Material-UI 图标元素，但是当我使用非方形图标时，图标会被裁剪。这是 Material-UI 建议使用的方式：

<Icon className="fa fa-address-card />

元素 CSS：

width: 1em;
height: 1em;
overflow: hidden;
font-size: 1.5rem;
flex-shrink: 0;
-moz-user-select: none;

我曾尝试限制图标宽度 (max-width)，但这不起作用。我想要的是：图标不能超过Material-UI图标默认宽度（1rem），所以我需要操纵图标高度，但FA图标大小由font-size控制，只是改变它不起作用。

【问题讨论】：

【解决方案1】：

发生这种情况是因为两个库样式相互覆盖，所以你必须像下面这样用另一个覆盖一个

解决方案1：（字体真棒）

.fa {
    display: inline-table;
}

或

解决方案 2：（Material-UI ）

.MuiIcon-root {
    width: auto;
}

或者不改变宽度试试这个

.fa:before {
  font-size: smaller !important;
}

【讨论】：

谢谢，我刚刚编辑了我的问题。我无法更改图标宽度。
@AlexandreAragão 您是否尝试过第一个解决方案 !important .fa { display: inline-table !important ; }
是的，但就像我说的，这个更改图标默认宽度，我需要保持宽度但更改高度（字体大小）
@AlexandreAragão 更新我的答案，请在不改变宽度的情况下检查

【解决方案2】：

【讨论】：