Favorite stars changed to hearts.

src/components/FavoriteButton.js

 import React from 'react'
 import {withStyles} from 'material-ui/styles';
-import yellow from 'material-ui/colors/yellow';
-import StarIcon from 'material-ui-icons/Star';
-import StarBorderIcon from 'material-ui-icons/StarBorder';
+import grey from 'material-ui/colors/grey'
+import pink from 'material-ui/colors/pink';
+import FavoriteBorderIcon from 'material-ui-icons/FavoriteBorder';
+import FavoriteIcon from 'material-ui-icons/Favorite';
 import PropTypes from 'prop-types';
 
 class FavoriteButton extends React.Component {
@@ -25,10 +26,12 @@ class FavoriteButton extends React.Component {
 
     render() {
         if (this.props.isFavorite) {
-            return (<StarIcon onClick={this.handleClick} className={this.props.classes.star}/>);
+            return (<FavoriteIcon onClick={this.handleClick} className={this.props.classes.heart}
+                                  style={{color: pink[400]}}/>);
         }
 
-        return (<StarBorderIcon onClick={this.handleClick} className={this.props.classes.star}/>);
+        return (<FavoriteBorderIcon onClick={this.handleClick} className={this.props.classes.heart}
+                                    style={{color: grey[400]}}/>);
     }
 }
 
@@ -41,14 +44,13 @@ FavoriteButton.propTypes = {
 };
 
 const styleSheet = {
-    star: {
+    heart: {
         position: 'absolute',
         top: '0px',
         right: '0px',
-        color: yellow[600],
-        height: '26px',
-        width: '26px',
-        padding: '4px',
+        height: '24px',
+        width: '24px',
+        padding: '5px',
         cursor: 'pointer',
     }
 };