Material UI and Material UI Icons

2 min readJul 22, 2021

React¹⁷.0.2, Material UI⁴.11, Material UI Icons⁴.11.2, Created at July 21, 2021, Read Series…

@material-ui/core is one of the most popular UI components packages for React.

Material-UI provides icons support in three ways:
- Standardized Material Design icons exported as React components (SVG icons).
- With the SvgIcon component, a React wrapper for custom SVG icons.
- With the Icon component, a React wrapper for custom font icons.

Run following command to install core components and icons:

npm install @material-ui/core
npm install @material-ui/icons

You can view src/App.tsx in Basic-1.2. material-ui/core commit.
[Try to understand] <Accordion> component and <ExpandMore /> icon

import { Accordion } from '@material-ui/core';
import { ExpandMore } from '@material-ui/icons';
... // in return()
        <Accordion>
          <AccordionSummary expandIcon={<ExpandMore />} >
            <Typography>Basic-1.2 material-ui/core</Typography>
          </AccordionSummary>
          <AccordionDetails>
            <Typography>Material-UI ^4.11.4</Typography>
          </AccordionDetails>
        </Accordion>

material-ui/core theme

[Try to understand] @material-ui theme, createMuiTheme, is also demoed in src/theme.tsx and referenced in src/App.tsx.

import red from '@material-ui/core/colors/red';
import { createMuiTheme } from '@material-ui/core/styles';
// A custom theme for this app
const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#556cd6',
    },
    secondary: {
      main: '#19857b',
    },
    error: {
      main: red.A400,
    },
    background: {
      default: '#fff',
    },
  },
});export default theme;

Enable theme in src/index.tsx

[Try to understand] ThemeProvider with theme, and CssBaseline.

import CssBaseline from '@material-ui/core/CssBaseline';
import { ThemeProvider } from '@material-ui/core/styles';ReactDOM.render(
  <ThemeProvider theme={theme}>
    {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
    <CssBaseline />
    <App />
  </ThemeProvider>,
  document.querySelector('#root'),
);

Example: material-ui working with AppBar

makeStyles and theme

[Try to understand] makeStyles with theme: useStyles, classes

Material UI Icon, example: MenuIcon

[Try to understand] import MenuIcon

import { AppBar, IconButton, Theme, Toolbar, Typography } from "@material-ui/core";
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
}));export default function App() {
  const classes = useStyles();return (
    // For full screen: replace <Container></Container> 
    // with <div className={classes.root}></div>
    <Container maxWidth="xl">
      <AppBar position="static">
        <Toolbar>
          <IconButton color="inherit" aria-label="open drawer"> 
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            React17MUI4
          </Typography>
        </Toolbar>
      </AppBar>
    </Container >
  );
}

Github commits is here: Basic-1.2. material-ui/core

Conclusion

material-uiis an open-source project that features React components that implement Google’s Material Design.

There are far more interesting features that we haven’t covered. For example, Material-UI comes with an opt-in CssBaseline component that applies cross-browser normalizations, such as resetting margins or font family…