Implement Materialize starter template into Ember (without ember-cli-materialize)

app.scss

// app/styles/app.scss

@import "materialize";

// From http://materializecss.com/templates/starter-template/css/style.css
.icon-block {
  padding: 0 15px;
}

.icon-block .material-icons {
  font-size: inherit;
}

application.hbs

<!-- app/templates/application.hbs -->

<nav class="light-blue lighten-1" role="navigation">
  <div class="nav-wrapper container"><a id="logo-container" href="#" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="#">Navbar Link</a></li>
    </ul>

    <ul id="nav-mobile" class="side-nav">
      <li><a href="#">Navbar Link</a></li>
    </ul>
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
  </div>
</nav>

{{outlet}}

<footer class="page-footer orange">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Company Bio</h5>
        <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>


      </div>
      <div class="col l3 s12">
        <h5 class="white-text">Settings</h5>
        <ul>
          <li><a class="white-text" href="#!">Link 1</a></li>
          <li><a class="white-text" href="#!">Link 2</a></li>
          <li><a class="white-text" href="#!">Link 3</a></li>
          <li><a class="white-text" href="#!">Link 4</a></li>
        </ul>
      </div>
      <div class="col l3 s12">
        <h5 class="white-text">Connect</h5>
        <ul>
          <li><a class="white-text" href="#!">Link 1</a></li>
          <li><a class="white-text" href="#!">Link 2</a></li>
          <li><a class="white-text" href="#!">Link 3</a></li>
          <li><a class="white-text" href="#!">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      Made by <a class="orange-text text-lighten-3" href="http://materializecss.com">Materialize</a>
    </div>
  </div>
</footer>

ember-cli-build.js

/*jshint node:true*/
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    // Add options here
    sassOptions: {
      includePaths: [
        'bower_components/materialize/sass'
      ]
    }
  });

  // Use `app.import` to add additional libraries to the generated
  // output files.
  //
  // If you need to use different assets in different
  // environments, specify an object as the first parameter. That
  // object's keys should be the environment name and the values
  // should be the asset to use in that environment.
  //
  // If the library that you are including contains AMD or ES6
  // modules that you would like to import into your application
  // please specify an object with the list of modules as keys
  // along with the exports of each module as its value.

  // Main Materialize.js
  app.import({
    development: 'bower_components/materialize/dist/js/materialize.js',
    production: 'bower_components/materialize/dist/js/materialize.min.js'
  });

  // Roboto fonts
  const ROBOTO_VARIANTS = ['Thin', 'Light', 'Regular', 'Medium', 'Bold'];
  const ROBOTO_FONT_TYPES = ['woff2', 'woff', 'ttf', 'eot'];
  ROBOTO_VARIANTS.forEach(type => {
    ROBOTO_FONT_TYPES.forEach(extension => {
      app.import(`bower_components/materialize/fonts/roboto/Roboto-${type}.${extension}`, { destDir: 'fonts/roboto' });
    });
  });

  return app.toTree();
};

index.hbs

<!-- app/templates/index.hbs -->

<div class="section no-pad-bot" id="index-banner">
  <div class="container">
    <br><br>
    <h1 class="header center orange-text">Starter Template</h1>
    <div class="row center">
      <h5 class="header col s12 light">A modern responsive front-end framework based on Material Design</h5>
    </div>
    <div class="row center">
      <a href="http://materializecss.com/getting-started.html" id="download-button" class="btn-large waves-effect waves-light orange">Get Started</a>
    </div>
    <br><br>

  </div>
</div>


<div class="container">
  <div class="section">

    <!--   Icon Section   -->
    <div class="row">
      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center light-blue-text"><i class="material-icons">flash_on</i></h2>
          <h5 class="center">Speeds up development</h5>

          <p class="light">We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.</p>
        </div>
      </div>

      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center light-blue-text"><i class="material-icons">group</i></h2>
          <h5 class="center">User Experience Focused</h5>

          <p class="light">By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.</p>
        </div>
      </div>

      <div class="col s12 m4">
        <div class="icon-block">
          <h2 class="center light-blue-text"><i class="material-icons">settings</i></h2>
          <h5 class="center">Easy to work with</h5>

          <p class="light">We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.</p>
        </div>
      </div>
    </div>

  </div>
  <br><br>

  <div class="section">

  </div>
</div>

index.html

<!-- app/index.html -->

<!-- Add the following line under <link rel="stylesheet" href="{{rootURL}}assets/ember-quickstart.css"> -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

install.sh

# Create new ember application
npm install -g [email protected]
ember new ember-quickstart
cd ember-quickstart

# Install ember-cli-sass for including materialize sass component
ember install ember-cli-sass
bower install materialize

# Create template files for template
# Main wrapper template (with header and footer)
ember generate template application
# Main / template
ember generate template index

# Make sure the sass file exists
touch app/styles/app.scss

# Run server
ember server

This will probably work, but you can also use https://github.com/mike-north/ember-materialize-shim ;)