Add social icons

mui · Nov 30, 2019 · e98a1fb · e98a1fb
1 parent e2f36ac
commit e98a1fb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/docs/src/pages/getting-started/templates/blog/Blog.js b/docs/src/pages/getting-started/templates/blog/Blog.js
@@ -3,6 +3,9 @@ import { makeStyles } from '@material-ui/core/styles';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Grid from '@material-ui/core/Grid';
 import Container from '@material-ui/core/Container';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import TwitterIcon from '@material-ui/icons/Twitter';
 import Header from './Header';
 import MainFeaturedPost from './MainFeaturedPost';
 import FeaturedPost from './FeaturedPost';
@@ -79,7 +82,11 @@ const sidebar = {
  { title: 'May 1999', url: '#' },
  { title: 'April 1999', url: '#' },
  ],
- social: ['GitHub', 'Twitter', 'Facebook'],
+ social: [
+ { name: 'GitHub', icon: GitHubIcon },
+ { name: 'Twitter', icon: TwitterIcon },
+ { name: 'Facebook', icon: FacebookIcon },
+ ],
 };
 
 export default function Blog() {

diff --git a/docs/src/pages/getting-started/templates/blog/Sidebar.js b/docs/src/pages/getting-started/templates/blog/Sidebar.js
@@ -41,7 +41,12 @@ export default function Sidebar(props) {
  </Typography>
  {social.map(network => (
  <Link display="block" variant="body1" href="#" key={network}>
- {network}
+ <Grid container direction="row" spacing={1} alignItems="center">
+ <Grid item>
+ <network.icon />
+ </Grid>
+ <Grid item>{network.name}</Grid>
+ </Grid>
  </Link>
  ))}
  </Grid>