Scaling icons

The fontSize property of the Material-UI icon components accepts a string value that represents a predetermined icon size. The reason the property is called fontSize instead of size is because the fontSize CSS property is what determines the size of an icon. The default is 24px.

How to do it...

This example uses a Storybook control to change the fontSize property of the icons that are rendered:

Here's some code that renders several icons that use the selected fontSize value:

import React, { Fragment } from 'react';

import { withStyles } from '@material-ui/core/styles';

import Cast from '@material-ui/icons/Cast';
import CastConnected from '@material-ui/icons/CastConnected...