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.
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.
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