I am doing a React Js portfolio website. There I utilize 'material-ui' library for the styling and icons.
In the following code I have imported the icons Facebook, GitHub and LinkedIn icons from the material-ui-icons. Initially I thought material-ui is a good library and started to use it. Now only I got to know that the library does not have icons for 'Stack overflow' and 'Hackerrank'.
I am quite new to ReactJs too. Hence now I am stuck at this level, not knowing how to import icons for Stack overflow and Hackerrank. Does anybody knows the best and easiest way to do this? (while importing the Facebook, GitHub and LinkedIn icons from the material-ui-icons and import other two icons in some other way in use them.
Following is the code I developed so far. (there I have imported and used the icons from material-ui-icons)
import React from 'react';
import {makeStyles} from "@material-ui/styles";
import {BottomNavigation, BottomNavigationAction} from "@material-ui/core";
import LinkedIn from "@material-ui/icons/LinkedIn";
import GitHub from "@material-ui/icons/GitHub";
import Facebook from "@material-ui/icons/Facebook";
const useStyles = makeStyles({
root: {
"& .MuiBottomNavigationAction-root": {
minWdith: 0,
maxWidth: 250
}
}
})
const Footer = () => {
const classes = useStyles();
return (
<BottomNavigation
width="auto"
style={{background: "#222"}}
>
<BottomNavigationAction
className={classes.root}
style={{padding:0}}
icon={<LinkedIn/>}>
</BottomNavigationAction>
<BottomNavigationAction
className={classes.root}
style={{padding:0}}
icon={<GitHub/>}>
</BottomNavigationAction>
<BottomNavigationAction
className={classes.root}
style={{padding:0}}
icon={<Facebook/>}>
</BottomNavigationAction>
</BottomNavigation>
)
}
export default Footer;
Thanks a lot !