Icon Color

We can change the color of icons.

To do that, we add the color prop to the icon.

For example, we can write:

import React from "react";
import red from "@material-ui/core/colors/red";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon />
      <MailIcon color="primary" />
      <MailIcon color="secondary" />
      <MailIcon color="action" />
      <MailIcon color="disabled" />
      <MailIcon style={{ color: red[500] }} />
    </div>
  );
}

to add icons with different colors.

The color prop lets us change the color style of the icon.

We can also change it with the style prop.

We set the color by import the color from Material UI.

Size

To change the size of an icon, we can change the fontSize prop.

For example, we can write:

import React from "react";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon fontSize="small" />
      <MailIcon />
      <MailIcon fontSize="large" />
      <MailIcon style={{ fontSize: 50 }} />
    </div>
  );
}

The fontSize can be set to small or large .

To set a custom size, we can also set the style prop with the fontSize of our choice.

Font icons

To add our own icons from the Material Icons CDN, we can add a link tag to index.html :

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

Once we did that, we can use the Icon component:

import React from "react";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
    </div>
  );
}

We can also change the color with this component.

For example, we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
      <Icon color="primary">star</Icon>
      <Icon color="secondary">star</Icon>
      <Icon style={{ color: green[500] }}>star</Icon>
      <Icon fontSize="small">star</Icon>
    </div>
  );
}

We have the name of the icon in between the tags.

And we set the color prop to change the color.

#programming #technology #javascript #software-development #web-development