Material-UI Значок обрезка элемента Значок FontAwesome

Question

Я использую элемент Material-UI Icon с иконками Font Awesome, но когда я использую неквадратный значок, значок обрезается. Вот как Material-UI предлагает использовать:

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

Код: https://stackblitz.com/edit/react-yhlk4v?file=index.js

Элемент 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, и просто изменить его не работает.

Answer 1

Это происходит потому, что оба стиля библиотек переопределяют друг друга, поэтому вам нужно переопределить один другой с другим, как показано ниже

Решение 1: (font-awesome)

.fa {
    display: inline-table;
}

ИЛИ

Решение 2: (Material-UI)

.MuiIcon-root {
    width: auto;
}

Или без изменения ширины попробуйте это

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

Answer 2

ширина вашего контейнера для значка меньше, чем у значка, я попробовал 30x24 и получил полную иконку