Значки пользовательского интерфейса материала отображаются неправильно

Question

Извините, что спрашиваю это снова, но я не могу на всю жизнь выяснить, что происходит. Я перемещаю свое приложение React в угловое приложение и у меня все работает, за исключением материала-пользовательского интерфейса / значков. Они есть, они просто выглядят не так, как должны!

Я использую самые последние пакеты, у меня есть ссылка на стили в моем файле index.html, и я считаю, что я правильно использую иконки.

import { Close } from '@material-ui/icons'

<Close />

Вот как они выглядят в моем приложении. Bad Icons Image

У меня нет ошибок консоли, связанных с material-ui или иконками.

Answer 1

Должно быть:

import Close from '@material-ui/icons/Close'

Попробуйте тоже:

import Icon from '@material-ui/core/Icon';

<Icon>close</Icon>

Answer 2

Если ваша среда не поддерживает встряхивание деревьев, рекомендуемый способ импорта значков следующий:

import Close from '@material-ui/icons/Close';

Если ваша среда поддерживает встряхивание деревьев, вы также можете импортировать значки следующим образом:

import { Close } from '@material-ui/icons';

Импортирование именованных экспортов таким способом приведет к тому, что код для каждого значка будет включен в ваш проект, поэтому не рекомендуется, если вы не настроили расшатывание дерева.Это также может повлиять на производительность «Горячего перезапуска модуля», если вы его включите.

Чтобы включить встряхивание дерева нажмите меня