Alternatives for Icons in @material-ui/icons

Viewed 1419

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 !

2 Answers

You can also define your custom icons using <SvgIcon> from @material-ui core

import SvgIcon from "@material-ui/core/SvgIcon";

const StackOverflowIcon = (
  <SvgIcon fontSize="small">
    <path d="M15 21h-10v-2h10v2zm6-11.665l-1.621-9.335-1.993.346 1.62 9.335 1.994-.346zm-5.964 6.937l-9.746-.975-.186 2.016 9.755.879.177-1.92zm.538-2.587l-9.276-2.608-.526 1.954 9.306 2.5.496-1.846zm1.204-2.413l-8.297-4.864-1.029 1.743 8.298 4.865 1.028-1.744zm1.866-1.467l-5.339-7.829-1.672 1.14 5.339 7.829 1.672-1.14zm-2.644 4.195v8h-12v-8h-2v10h16v-10h-2z" />
  </SvgIcon>
);

const HackerRankIcon = (
  <SvgIcon>
    <path d="M12 0c1.285 0 9.75 4.886 10.392 6 .645 1.115.645 10.885 0 12S13.287 24 12 24s-9.75-4.885-10.395-6c-.641-1.115-.641-10.885 0-12C2.25 4.886 10.715 0 12 0zm2.295 6.799c-.141 0-.258.115-.258.258v3.875H9.963V6.908h.701c.141 0 .254-.115.254-.258 0-.094-.049-.176-.123-.221L9.223 4.92c-.049-.063-.141-.109-.226-.109-.084 0-.16.045-.207.107L7.11 6.43c-.072.045-.12.126-.12.218 0 .143.113.258.255.258h.704l.008 10.035c0 .145.111.258.254.258h1.492c.142 0 .259-.115.259-.256v-4.004h4.073v4.152h-.699c-.143 0-.256.115-.256.258 0 .092.048.174.119.219l1.579 1.51c.044.061.141.109.225.109.085 0 .159-.045.208-.109l1.679-1.51c.072-.045.12-.127.12-.219 0-.143-.115-.258-.255-.258h-.704l-.007-10.034c0-.145-.114-.26-.255-.26h-1.494v.002z" />
  </SvgIcon>
);


//Usage can be 

<BottomNavigationAction
        className={classes.root}
        style={{padding: 0}}
        icon={StackOverflowIcon}
></BottomNavigationAction>
<BottomNavigationAction
        className={classes.root}
        style={{padding: 0}}
        icon={HackerRankIcon}
></BottomNavigationAction>

Related