Skip to main content

Overview

In our library, we use icons through MUI icon component and font icons.

Setup (Google Web Fonts)​

All you need to do is to include this line in your html:

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
/>

Icon will set the outlined variant class name for the Material Icons font.

Customization​

Material Icons offers five different font styles, so you can customize the default settings by adding your desired class at the end of the href link. Then, insert baseClassName prop in your Icon component or in your theme.

For Example:

  • 1 Import:
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/icon?family=Material+Icons+Rounded"
/>

  • 2 Usage:

  • Inclusion through props in the icon component

import Icon from '@mui/material/Icon';

<Icon baseClassName="material-icons-rounded">add_circle</Icon>

or

  • Inclusion through global style in the theme.
const theme = createTheme({
  components: {
    MuiIcon: {
      defaultProps: {
        // Replace the `material-icons` default value.
        baseClassName: 'material-icons-rounded',
      },
    },
  },
});

Styling icons​

To style icons follow the material design guidelines.