There is very little to no documentation of this out there. In fact, I am starting to doubt ng2 and React can play together. But I'm no expert, so I need your help.

According to Material UI docs for the AppBar here This is the code to add it to your component

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const AppBarExampleIcon = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default AppBarExampleIcon;

Problem is, this is documentation for a React Component, not an Angular2 Component.

This is as far as I got in my Angular2 component with the little information that is out there:

  import { Component, OnInit } from '@angular/core';
  import { React } from 'react';
  import { AppBar } from 'material-ui';


  @Component({
      selector: 'app-toolbar',
      templateUrl: './toolbar.component.html',
      styleUrls: ['./toolbar.component.css']
  })
  export class ToolbarComponent implements OnInit {
      AppBarExampleIcon = `
          <AppBar title="Title" iconClassNameRight="muidocs-icon-navigation-expand-more" />
      `;
  constructor() { }

  ngOnInit() {
  }

}

This results in nothing.

Has anyone tried this before?