0

What is the difference between these TypeScript import types?

import SettingsIcon from "@material-ui/icons/Settings";
import { MenuList } from "@material-ui/core";

As far as I understand, the first one without curly brackets is a direct class import and and the second is one class out of a collection of classes. Would that be right? One thing that does not work is importing several *Icon classes from @material-ui/icons and I cannot really tell why, i.e. the following does not work:

import { ImageIcon, LanguageIcon, DescriptionIcon, MenuIcon, SchoolIcon, SettingsIcon } from "@material-ui/icons";

Why can I not import those icon classes? How can I find out what type of import I need?

Socrates
  • 8,724
  • 25
  • 66
  • 113
  • 1
    Have a look at this page, please. Here they explain how to handle these icons: https://material-ui.com/style/icons/. It is a design decision and somewhat stability too whether you provide each component or icon in a separate path or not. There was a time when everyone was keen using the so called 'barrels' which are index.ts-files which you could use to bundle imports. But due to circle dependency problems they recommended somewhen not to do it anymore. Maybe that's the reason. –  Feb 01 '19 at 05:25
  • 1
    This post answers your first question: https://stackoverflow.com/questions/38729486/typescript-difference-between-import-and-import-with-curly-braces –  Feb 01 '19 at 05:30

1 Answers1

2

If you go through the document, for imports - it clearly states that

If your environment doesn't support tree-shaking, the recommended way to import the icons is the following:

 import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
 import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

If your environment support tree-shaking you can also import the icons this way:

 import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';

So, you can do it only if your dev environment supports tree-shaking. You can refer to the document here: Imports for material-ui

Manit
  • 1,087
  • 11
  • 17