top-app-bar-example.js

import React, {Component} from 'react';

class TopAppBar extends Component {
  render() {
    return (
      <div className="mdc-top-app-bar">
        {this.props.children}
      </div>
    );
  }
}

class MyCoolApp extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      navIconChangedOrWhatever: false,
    }
    
    this.handleIconClick = this.handleIconClick.bind(this);
  }
  
  handleIconClick() {
    this.setState({navIconChangedOrWhatever: true});
  }
  
  render() {
    const classes = `mdc-icon whatever ${this.state.navIconChangedOrWhatever ? 'mdc-icon--modified' : ''}`;
    
    return (
      <TopAppBar>
        <div className={classes}
            onClick={this.handleIconClick}>some icon</div>
        <div className="some other stuff">
      </TopAppBar>
    )
  }
}