From 1fb0215ade9144c4554abaa710e0701fff71321a Mon Sep 17 00:00:00 2001
From: RC <rc.chandru@gmail.com>
Date: Wed, 5 Jul 2017 12:20:04 +0530
Subject: [PATCH] fix($browser): Ability to add custom css styles for the icon

https://github.com/rcdexta/react-event-timeline/issues/7
---
 README.md                   |  1 +
 components/TimelineEvent.js | 15 ++++++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c332aa7..32a49ac 100644
--- a/README.md
+++ b/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 |
diff --git a/components/TimelineEvent.js b/components/TimelineEvent.js
index 6cf98b6..ea91a70 100644
--- a/components/TimelineEvent.js
+++ b/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