Make HeaderButton able to have Icon or Image

website/src/ui/HeaderButton.js

@@ -2,21 +2,30 @@ import Radium from 'radium'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import style from './HeaderButton.style'
-import { Icon } from 'ui'
+import { Icon, Image } from '.'
+import { sizeInfo } from 'ui/style'
 
 class HeaderButton extends Component {
   static propTypes = {
-    icon: PropTypes.string,
     onClick: PropTypes.func,
-    size: PropTypes.number
+    icon: PropTypes.string,
+    image: PropTypes.object,
   }
 
   render() {
-    const { onClick, icon, size } = this.props
+    const size = sizeInfo.headerHeight - sizeInfo.headerBorderWidth
+    const { onClick, icon, image } = this.props
+    let content = null
+
+    if (image) {
+      content = (<Image source={image} width={size} height={size} />)
+    } else if (icon) {
+      content = (<Icon name={icon} size={size} />)
+    }
 
     return (
       <button type='button' style={[{ height: size, width: size }, style.base]} onClick={onClick}>
-        <Icon name={icon} size={size} />
+        {content}
       </button>
     )
   }