Rails Material Design Icons
Rails Material Design Icons provides the Material Design Icons web fonts and stylesheets as a Rails engine for use with the asset pipeline.
Most of the work was done in Font Awesome gem, this just changes the files to Material Design Icons. Font Awesome Rails
Installation
Add this to your Gemfile:
gem "rails_material_design_icons"
and run bundle install
.
Usage
In your application.css
, include the css file:
/*
*= require materialdesignicons
*/
Then restart your webserver if it was previously running.
Congrats! You now have scalable vector icon support. Pick an icon and check out the official website for the icons available. https://materialdesignicons.com/.
Sass Support
If you prefer SCSS, add this to your
application.css.scss
file:
@import "materialdesignicons";
If you use the
Sass indented syntax,
add this to your application.css.sass
file:
@import materialdesignicons
Helpers
There are also some helpers (mdi
and mdi_spin
) that make your
views icontastic!
mdi "sheep"
# => <i class="mdi mdi-sheep"></i>
mdi_spin # spinning icons!
# => <i class="mdi mdi-sheep mdi-spin"></i>
Deploying to sub-folders
It is sometimes the case that deploying a Rails application to a production
environment requires the application to be hosted at a sub-folder on the server.
This may be the case, for example, if Apache HTTPD or Nginx is being used as a
front-end proxy server, with Rails handling only requests that come in to a sub-folder
such as http://example.com/myrailsapp
. In this case, the
FontAwesome gem (and other asset-serving engines) needs to know the sub-folder,
otherwise you can experience a problem roughly described as "my app works
fine in development, but fails when I deploy
it".
To fix this, set the relative URL root for the application. In the
environment file for the deployed version of the app, for example
config/environments/production.rb
,
set the config option action_controller.relative_url_root
:
MyApp::Application.configure do
...
# set the relative root, because we're deploying to /myrailsapp
config.action_controller.relative_url_root = "/myrailsapp"
...
end
The default value of this variable is taken from ENV['RAILS_RELATIVE_URL_ROOT']
,
so configuring the environment to define RAILS_RELATIVE_URL_ROOT
is an alternative strategy.
In addition you need to indicate the subfolder when you precompile the assets:
RAILS_ENV=production bundle exec rake assets:precompile RAILS_RELATIVE_URL_ROOT=/myrailsapp
License
- The Material Design font is licensed under the Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0)
- Material Design CSS files are licensed under the MIT License.
- The remainder of the rails_material_design_icons project is licensed under the MIT License.