How to Enlarge The Svg Icon in Material-Ui Iconbuttons

How to enlarge the SVG icon in material-ui iconButtons?

Note: iconStyle prop is no longer supported on IconButton Material UI making this answer obsolete

You have to set the size of the icon in the iconStyle prop in <IconButton>. Example below from the material-ui docs.

From my experience, if you set just the height or the width, nothing happens--only seems to work when you set height & width to the same value.

import React from 'react';
import IconButton from 'material-ui/IconButton';
import ActionHome from 'material-ui/svg-icons/action/home';

const styles = {

  largeIcon: {
    width: 60,
    height: 60,
  },

};

const IconButtonExampleSize = () => (
  <div>
    <IconButton
      iconStyle={styles.largeIcon}

    >
      <ActionHome />
    </IconButton>
  </div>
);

Best Practice to adjust height of Material UI Icon

The icons have a fontSize property - e.g. <HomeIcon fontSize="large" />.

You can also set it explicitly - <DeleteIcon style={{fontSize: "10px"}}/>.

How to increase material-ui icons?

Try adding the label style of the button like below

import ArrowUp from 'material-ui-icons/KeyboardArrowUp'

<Button fab color="primary" labelStyle={{ fontSize: '200%' }}>
  <ArrowUp />
</Button>

Change size of startIcon / endIcon Material-UI

The default styles for the icon size can be found here (and shown below): https://github.com/mui-org/material-ui/blob/v4.11.0/packages/material-ui/src/Button/Button.js#L249. Which of the three is used depends on the size prop for the Button. medium is the default.

  /* Styles applied to the icon element if supplied and `size="small"`. */
  iconSizeSmall: {
    '& > *:first-child': {
      fontSize: 18,
    },
  },
  /* Styles applied to the icon element if supplied and `size="medium"`. */
  iconSizeMedium: {
    '& > *:first-child': {
      fontSize: 20,
    },
  },
  /* Styles applied to the icon element if supplied and `size="large"`. */
  iconSizeLarge: {
    '& > *:first-child': {
      fontSize: 22,
    },
  },

Below is an example of how to override this in the theme.

const theme = createMuiTheme({
  overrides: {
    MuiButton: {
      iconSizeMedium: {
        "& > *:first-child": {
          fontSize: 22
        }
      }
    }
  }
});

How to merge a svg Icon with Material-UI SvgIcon

Ok, after long night spending trying out so many ways, I found the only working solution.

1. Firstly, I made a file with stores all the files as constants.
   
   I created a file at src/assets/images/index.tsx

I use typescript

I structured the file like this:

import Logo from "./path/to/Logo.svg";

function getSVG(link: string) {
  return <object data={link} type="image/svg+xml"></object>;
}

export const SVG_Logo = (): JSX.Element => getSVG(Logo); // This is the JSX Component
export const FILE_Logo = Logo; // This is the file path string

How to increase the number of Icons in Material-UI React

You have to use an Array:

let participants = [<PersonIcon />];
  for (let i = 1; i < activity.participants; i++) {
    participants.push(<PersonIcon />);
  }

A more elegant way to achieve the same without loop would be

let participants = Array.from(new Array(activity.participants), () => <PersonIcon />)

How to use an SVG file in a SvgIcon in Material-UI

<path /> is an SVG path, i.e. the internal bits of the SVG. the SvgIcon component really should be able to take a path, but it doesn't :(

instead you can create a component like https://github.com/callemall/material-ui/blob/56c113217d7d05d8bb0712771b727df81984d04b/src/svg-icons/action/home.js

with your svg source in place of the path. (I recommend minifying it a bit using https://jakearchibald.github.io/svgomg/)

---

Related Topics