Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
September 11, 2021 13:07
September 11, 2021 12:14
October 29, 2018 14:35
June 14, 2017 11:15
December 19, 2014 17:27
December 19, 2014 17:27
September 11, 2021 13:09
September 11, 2021 13:08

Materialize sass ruby gem Gem Version

materialize-sass is a Sass powered version of Materialize, a modern responsive front-end framework based on Material Design.




This master branch now v1.1.0-alpha

Documentation for previous releases (v0.100.*) are available this branch.


In your Gemfile you need to add the materialize-sass gem:

gem 'materialize-sass', '~> 1.0.0'

or github master branch

gem 'materialize-sass', github: 'mkhairi/materialize-sass

And then run the bundler and restart your server to make the files available through the pipeline:

$ bundle install

Or install it separately:

$ gem install materialize-sass


a. Sass

Import Materialize styles in app/assets/stylesheets/application.scss:

@import "materialize";

NOTE: If you have just generated a new Rails application, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so remove it.

$ rm app/assets/stylesheets/application.css

HINT: Override materialize color variable.

Since materialize color scheme are declared in color.scss you should import the color.scss first. then you can override color variable just like this:

@import "materialize/components/color-variables";
$primary-color: color("blue", "lighten-2") !default;
$secondary-color: color("yellow", "base") !default;
@import 'materialize';


You can import each component just like in this file below:

b. JavaScript

Require Materialize javascripts in app/assets/javascripts/application.js:

//= require materialize


Require materialize-sprockets to provide individual Materialize components for ease of debugging

//= require materialize-sprockets

c. Icons

Include this line in the portion of your HTML code

  <link href="" rel="stylesheet"> 

or import this line in your application.scss

  @import "";

or install this gem for offline icons

  gem 'material_icons' 

see docs


note: Any changes or Pull Request regarding materialize assets should be made in official materialize repo.

  1. Fork it ( )
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create a new Pull Request