fix($browser): Ability to add custom css styles for the icon

#7

README.md

@@ -77,6 +77,7 @@ Each event in the timeline will be represented by the `TimelineEvent` component.
 | createdAt | node   | The time at which the event occurred. Can be datetime string or any DOM element node(s) |
 | icon      | node   | The icon to show as event lable. Can be a SVG or font icon |
 | iconColor | string | CSS color code for icon                  |
+| iconStyle | node | Custom CSS for the icon                  |
 | buttons   | node   | Action buttons to display to the right of the event content |
 | contentStyle | node | Override content style |
 | style | node | Override style for the entire event container |

components/TimelineEvent.js

@@ -28,16 +28,19 @@ class TimelineEvent extends Component {
     return this.showAsCard() ? {...s.eventContainer, ...s.card, ...userStyle} : s.eventContainer
   }
 
+  iconStyle() {
+    return {...s.materialIcons, ...this.props.iconStyle}
+  }
+
   render() {
     const {createdAt, title, contentStyle, buttons, icon, iconColor, container, ...otherProps} = this.props
     return <div style={s.event}>
       <div style={this.mergeNotificationStyle(iconColor)}>
-        <span style={s.materialIcons}>{icon}</span>
+        <span style={this.iconStyle()}>{icon}</span>
       </div>
-      <div {...otherProps} style={this.containerStyle()}>
 
+      <div {...otherProps} style={this.containerStyle()}>
         <div style={s.eventContainerBefore} />
-
         <div style={container === 'card' ? s.cardTitle : {}}>
           <div style={this.timeStyle()}>{createdAt}</div>
           <div>{title}</div>
@@ -62,8 +65,14 @@ TimelineEvent.propTypes = {
   container: PropTypes.string,
   icon: PropTypes.node,
   iconColor: PropTypes.string,
+  iconStyle: PropTypes.string,
   contentStyle: PropTypes.object,
   style: PropTypes.object
 }
 
+TimelineEvent.defaultProps = {
+  iconStyle: {},
+  contentStyle: {}
+}
+
 export default TimelineEvent