Allow theming right panel header buttons

src/components/views/right_panel/HeaderButton.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import dis from '../../../dispatcher';
 import Analytics from '../../../Analytics';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 
 export default class HeaderButton extends React.Component {
     constructor() {
@@ -44,6 +43,7 @@ export default class HeaderButton extends React.Component {
         const classes = classNames({
             mx_RightPanel_headerButton: true,
             mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+            [`mx_RightPanel_${this.props.name}`]: true,
         });
 
         return <AccessibleButton
@@ -51,9 +51,8 @@ export default class HeaderButton extends React.Component {
             aria-expanded={this.props.isHighlighted}
             title={this.props.title}
             className={classes}
-            onClick={this.onClick} >
-                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
-            </AccessibleButton>;
+            onClick={this.onClick}>
+        </AccessibleButton>;
     }
 }
 
@@ -62,14 +61,14 @@ HeaderButton.propTypes = {
     isHighlighted: PropTypes.bool.isRequired,
     // The phase to swap to when the button is clicked
     clickPhase: PropTypes.string.isRequired,
-    // The source file of the icon to display
-    iconSrc: PropTypes.string.isRequired,
 
     // The badge to display above the icon
     badge: PropTypes.node,
     // The parameters to track the click event
     analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
 
+    // Button name
+    name: PropTypes.string.isRequired,
     // Button title
     title: PropTypes.string.isRequired,
 };