material_icons 2.2.1 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: f87d1314fa1478ced62e604bb57d068a29278470
-  data.tar.gz: 7599ebb813fd6976182638bbea9a2c6e19b4c0d5
+SHA256:
+  metadata.gz: 4f23a2a35fd57b5727eb8a2bdccb2ff088af3efa4e478454bb874a7983550b18
+  data.tar.gz: 03cedafcf0bef43611c10d3118e06c842376bb00cc018cbdd3eae6a46787220a
 SHA512:
-  metadata.gz: 840926e154cff6ddfbb699936a9d4f37f97081e1391bf163da9c4eb7754498a00b9cceb28a354fb2087a64c88489344294fda5c814a53c8ae4f702486b9ca28d
-  data.tar.gz: 27ae98079321f4c712c941ac479fd7f59b390546df173ff9795087dab0d927be5a2bd7c46f840b67148b528f79e9802c22d0be642d5c1bb4e2b658702e9cc213
+  metadata.gz: bb1db8eae576a48d875e6844b347cad51b5c4c4d9ce3ab1b8019d4ae5d6cbb4e120a975a7a8aa158c01c4e66826bc39163eb48886a9ee5a86442d54c4e7121e3
+  data.tar.gz: 0cf5737742226ebb9fcc0c3d8ac9ebf3032917bdb8d2bbc31d1d5667c90466365b7cee69f6bd09320f9dc3a52684e86c12149a02e325dbdb0cdbaada1c9baa88

data/README.md

@@ -1,14 +1,12 @@
-[![Gem Version](https://badge.fury.io/rb/material_icons.svg)](http://badge.fury.io/rb/material_icons) [![Build Status](https://travis-ci.org/Angelmmiguel/material_icons.svg?branch=master)](https://travis-ci.org/Angelmmiguel/material_icons) [![Code Climate](https://codeclimate.com/github/Angelmmiguel/material_icons/badges/gpa.svg)](https://codeclimate.com/github/Angelmmiguel/material_icons) [![Codacy Badge](https://api.codacy.com/project/badge/grade/5eb6d2d5a9d24ab98a1aed5835510e4f)](https://www.codacy.com/app/angelmm/material_icons) [![Coverage Status](https://coveralls.io/repos/Angelmmiguel/material_icons/badge.svg?branch=master&service=github)](https://coveralls.io/github/Angelmmiguel/material_icons?branch=master)
+[![Gem Version](https://badge.fury.io/rb/material_icons.svg)](http://badge.fury.io/rb/material_icons) [![Build Status](https://github.com/Angelmmiguel/material_icons/workflows/Ruby/badge.svg)](https://github.com/Angelmmiguel/material_icons/actions?query=workflow%3ARuby)
 
 ![Material Icons for Rails](https://raw.githubusercontent.com/Angelmmiguel/material_icons/master/material.png)
 
 # Material Icons for Rails
 
-[Google Material Icons](https://google.github.io/material-design-icons/) is a +900 set of icons based on Material Design guidelines. With this gem you can add it easily to your Rails projects.
+[Material Design Icons](https://google.github.io/material-design-icons/) is a **+2500 set of icons** based on Material Design guidelines. You can check all the icons in the [official site](https://fonts.google.com/icons?selected=Material+Icons).
 
-## Google Material Icons v2.2.2
-
-Google updates Material Icons to [v2.2.2](https://github.com/google/material-design-icons/releases/tag/2.2.2). It's include 41 new icons!
+**This gem helps you to add this fantastic icon collection to your Rails projects easily**. I keep the gem updated so you always will have the latest icons in your project.
 
 # Installation
 
@@ -20,9 +18,9 @@ Then, execute `bundle install`.
 
 # CSS
 
-In your `app/assets/stylesheets/application.css` file you need to reference material icons CSS. There are two versions: ligature or unicode (See [Compatibility](#compatibility) section for more info).
+In your `app/assets/stylesheets/application.css.erb` file you need to reference material icons CSS.
 
-Add this line at top of `application.css` to use ligature:
+Add this line at top of `application.css`:
 
 ```css
 /*
@@ -34,9 +32,101 @@ Add this line at top of `application.css` to use ligature:
 
 These files provide multiple CSS classes to use in your views. Main classes are:
 
-	.material-icons, .mi
+``` 
+.material-icons, .mi
+```
+
+## Upgrade from v2.X to 4.X
+
+The `v4.X` version changed how the icon shapes are set. Before, this gem used a `method_missing` approach (`mi.face`). Due to the amount of conflicting icon shape names, in `v4.X` I introduced the `shape` method to set the icon shape:
+
+```ruby
+# In v2.X
+mi.face
+
+# In v4.X
+mi.shape(:face)
+```
+
+When upgrading to v4.X, you will need to update all the calls to the `mi` and `material_icon` helpers.
+
+## Other styles
+
+This gem supports the new Google Material Icons styles. They are imported as a different CSS stylesheet, so you can set only the icons that are required for your project. You can set just one style or several ones.
+
+Every CSS stylesheet includes everything you need to use that style. If you don't plan to use the regular style, feel free to include any of the next styles and remove the `*= require material_icons` line from your `application.css.erb` file.
+
+### Outlined
+
+```css
+/*
+*= require material_icons.outlined
+*/
+```
+
+Usage in your template:
+
+```
+<%= material_icon.shape(:face).outlined %>
+# <i class="material-icons outlined">face</i> 
+```
+
+### Sharp
 
-Some CSS classes are provided too:
+```css
+/*
+*= require material_icons.sharp
+*/
+```
+
+Usage in your template:
+
+```
+<%= material_icon.shape(:face).sharp %>
+# <i class="material-icons sharp">face</i> 
+```
+
+### Round
+
+```css
+/*
+*= require material_icons.round
+*/
+```
+
+Usage in your template:
+
+```
+<%= material_icon.shape(:face).round %>
+# <i class="material-icons round">face</i> 
+```
+
+### Two Tone
+
+```css
+/*
+*= require material_icons.twotone
+*/
+```
+
+Usage in your template:
+
+```
+<%= material_icon.shape(:face).twotone %>
+# <i class="material-icons twotone">face</i> 
+```
+
+## Helper classes
+
+This gem includes several helper sizes. To add them to your project, add the following stylesheet:
+
+```css
+/*
+*= require material_icons.helpers
+*/
+```
+
+After adding it, the following helpers will be available:
 
 ```
 /* Size */
@@ -70,25 +160,30 @@ An example of icon is:
 <i class="material-icons md-36">face</i>
 ```
 
-## Helpers
+## Ruby helpers
+
+Material Icons provide two helpers to build the HTML code of icons. The methods are `material_icon` and `mi`. These helpers use cascade style to set the icon and options. **[Remember you first need to add the helpers stylesheet to use these helpers](#helper-classes)**.
 
-Material Icons provide two helpers to build the HTML code of icons. The methods are `material_icon` and `mi`. These helpers use cascade style to set the icon and options. Using same example:
+Using same example:
 
 ```
-<%= material_icon.face %>
+<%= material_icon.shape(:face) %>
 # <i class="material-icons">face</i>
 
-<%= material_icon.face.md_36 %>
+<%= material_icon.shape(:face).md_36 %>
 # <i class="material-icons md-36">face</i>
 
-# This is a special case because the icon name starts with a number. Only
-# 3d_rotation has this trouble.
-<%= material_icon.three_d_rotation.md_36 %>
+# You can use string too
+<%= material_icon.shape('3d_rotation').md_36 %>
 # <i class="material-icons md-36">3d_rotation</i>
 
 # Rotation and custom css class
-<%= mi.face.r90.css_class('my_class') %>
+<%= mi.shape(:face).r90.css_class('my_class') %>
 # <i class="material-icons r90 my_class">face</i>
+
+# Custom css and data attributes
+<%= mi.shape(:face).css_class('my_class').html(data: {id: 1}) %>
+# <i data-id="1" class="material-icons my_class">face</i>
 ```
 
 Allowed methods are:
@@ -119,85 +214,65 @@ html({ data: { id: 1 } })
 
 Remember this is a helper, you always can use HTML syntax ;).
 
-# Slim templating engine
-
-If you are using [Slim templating engine](http://slim-lang.com/) in your Rails application, use double equal `==` method to render icons or the content won't be marked as HTML safe. We are working on this issue, because we use `content_tag` and it sets the text as HTML safe (see [ActionView::Helpers::TagHelper line 146](https://github.com/rails/rails/blob/4-2-stable/actionview/lib/action_view/helpers/tag_helper.rb#L146)).
-
-```
-p.text
-  == material_icon.search.md_18
-```
-
-Reference [#9](https://github.com/Angelmmiguel/material_icons/issues/9)
-
 # Compatibility
 
 Ligature feature requires a supported browser:
 
-Browser | Version    
+Browser | Version
 ---- | ----
-Google Chrome | >= 11        
-Mozilla Firefox | >= 3.5     
-Apple Safari | >= 5       
-Microsoft IE | >= 10      
-Opera | >= 15      
+Google Chrome | >= 11
+Mozilla Firefox | >= 3.5
+Apple Safari | >= 5
+Microsoft IE | >= 10
+Opera | >= 15
 Apple MobileSafari | >= iOS 4.2
-Android Browser | >= 3.0     
+Android Browser | >= 3.0
 
-To increase compatibility you can use Unicode version of the library. To set Unicode icons, you need to change the line to load ligature CSS file on `app/assets/stylesheets/application.css` (`*= require material_icons`) to this line:
+You can find the current browser support in [_can I use?_](https://caniuse.com/kerning-pairs-ligatures).
 
-```css
-/*
-*= require material_icons_unicode
-*/
-```
+# Common issues
 
-**NOTE**: Depending on the comment style of `application.css`, you may need to add `//= require material_icons_unicode` instead of the previous line. See [Rails Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) for more info.
+## Slim templating engine
 
-Next, you need to specify the helper to use unicode because it uses ligatures by default. Create an initializer file on `config/initializers/material_icons.rb` and set this content:
+If you are using [Slim templating engine](http://slim-lang.com/) in your Rails application, use double equal `==` method to render icons or the content won't be marked as HTML safe. We are working on this issue, because we use `content_tag` and it sets the text as HTML safe (see [ActionView::Helpers::TagHelper line 146](https://github.com/rails/rails/blob/4-2-stable/actionview/lib/action_view/helpers/tag_helper.rb#L146)).
 
-```ruby
-# Initialize material icons setup
-MaterialIcons.setup do |config|
-  config.unicode = true
-end
+```
+p.text
+  == material_icon.shape(:search).md_18
 ```
 
-The [Helpers](#helpers) has the same syntax.
+Reference [#9](https://github.com/Angelmmiguel/material_icons/issues/9)
 
-Now, the text inside of HTML tag is the CSS class! CSS Icon classes use underscores.
+## Couldn't find file 'material_icons'
 
-```html
-<i class="material-icons face"></i>
-<i class="mi md-36 face"></i>
-<i class="mi add_box"></i>
-<i class="mi three_d_rotation"></i>
+```
+couldn't find file 'material_icons' with type 'application/javascript'
 ```
 
-This version increase the size of the CSS file too. To see the difference, these are the size for uncompressed CSS files:
+This error is related with the asset compilation of Rails. To fix it, just follow these steps:
 
-File | Size
----- | ----
-material_icons.css.erb | 3  KB
-material_icons_unicode.css.erb | 68 KB
+* Confirm that you [required the Material Icons CSS in your main CSS file](#CSS)
+* Check and remove any similar line of code from `app/assets/javascripts/application.js.erb`
+* Restart your rails server.
+
+Reference [#10](https://github.com/Angelmmiguel/material_icons/issues/10)
 
 # Tested on
 
-Tested with [Travis CI](https://travis-ci.org/Angelmmiguel/material_icons).
+Tested with [GitHub Actions](https://github.com/Angelmmiguel/material_icons/actions?query=workflow%3ARuby).
 
 Ruby versions:
 
-* 2.3.1
-* 2.2.2
-* 2.1.2
+* 2.6
+* 2.7
+* 3.0
+* 3.1
 
 Rails versions:
 
-* 3.2
-* 4.0
-* 4.1
-* 4.2
-* master
+* 6.0
+* 6.1
+* 7.0
 
 # They are using Material icons for Rails :)
 
@@ -209,4 +284,4 @@ Rails versions:
 
 Google Material Icons are under [Apache License v2.0](http://www.apache.org/licenses/LICENSE-2.0). _We'd love attribution in your app's about screen, but [it's not required](https://github.com/google/material-design-icons#license)_.
 
-Material Icons gem is released under the MIT license. Copyright [@Laux_es ;)](https://twitter.com/Laux_es)
+Material Icons gem is released under the MIT license. Copyright [Angel M Miguel](https://angel.kiwi)

data/app/assets/stylesheets/material_icons.css.erb

@@ -1,25 +1,21 @@
 /*
  * CSS File of Material icons.
  * CSS code based on:
- * https://google.github.io/material-design-icons/#icon-font-for-the-web
+ * https://github.com/google/material-design-icons
  */
 
-//= depend_on_asset "MaterialIcons-Regular.eot"
-//= depend_on_asset "MaterialIcons-Regular.woff2"
-//= depend_on_asset "MaterialIcons-Regular.woff"
-//= depend_on_asset "MaterialIcons-Regular.ttf"
+//= depend_on_asset "material-icons-regular.woff2"
+//= depend_on_asset "material-icons-regular.woff"
 
 /* Use the font */
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url('<%= font_path('MaterialIcons-Regular.eot') %>'); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
-       url('<%= font_path('MaterialIcons-Regular.woff2') %>') format('woff2'),
-       url('<%= font_path('MaterialIcons-Regular.woff') %>') format('woff'),
-       url('<%= font_path('MaterialIcons-Regular.ttf') %>') format('truetype');
+       url('<%= font_path('material-icons-regular.woff2') %>') format('woff2'),
+       url('<%= font_path('material-icons-regular.woff') %>') format('woff');
 }
 
 /* Base class */
@@ -28,65 +24,14 @@
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
-  font-size: 24px;  /* Preferred icon size */
-  display: inline-block;
-  width: 1em;
-  height: 1em;
+  font-size: 24px;
   line-height: 1;
+  letter-spacing: normal;
   text-transform: none;
-
-  /* Support for all WebKit browsers. */
-  -webkit-font-smoothing: antialiased;
-  /* Support for Safari and Chrome. */
-  text-rendering: optimizeLegibility;
-  /* Support for Firefox. */
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
   -moz-osx-font-smoothing: grayscale;
-  /* Support for IE. */
-  font-feature-settings: 'liga';
-}
-
-/* Rules for sizing the icon. */
-.material-icons.md-18, .mi.md-18 { font-size: 18px; }
-.material-icons.md-24, .mi.md-24 { font-size: 24px; }
-.material-icons.md-36, .mi.md-36 { font-size: 36px; }
-.material-icons.md-48, .mi.md-48 { font-size: 48px; }
-
-/* Rules for using icons as black on a light background. */
-.material-icons.md-dark, .mi.md-dark { color: rgba(0, 0, 0, 0.54); }
-.material-icons.md-dark.md-inactive, .mi.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
-
-/* Rules for using icons as white on a dark background. */
-.material-icons.md-light, .mi.md-light { color: rgba(255, 255, 255, 1); }
-.material-icons.md-light.md-inactive, .mi.md-inactive { color: rgba(255, 255, 255, 0.3); }
-
-/* Rules to rotate items */
-.material-icons.r90, .mi.r90 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
-}
-.material-icons.r180, .mi.r180 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-  -webkit-transform: rotate(180deg);
-  -ms-transform: rotate(180deg);
-  transform: rotate(180deg);
-}
-.material-icons.r270, .mi.r270 {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-  -webkit-transform: rotate(270deg);
-  -ms-transform: rotate(270deg);
-  transform: rotate(270deg);
-}
-.material-icons.flip-horizontal, .mi.flip-horizontal {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
-  -webkit-transform: scale(-1, 1);
-  -ms-transform: scale(-1, 1);
-  transform: scale(-1, 1);
-}
-.material-icons.flip-vertical, .mi.flip-vertical {
-  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
-  -webkit-transform: scale(1, -1);
-  -ms-transform: scale(1, -1);
-  transform: scale(1, -1);
-}
+}

data/app/assets/stylesheets/material_icons.helpers.css

@@ -0,0 +1,45 @@
+/* Rules for sizing the icon. */
+.material-icons.md-18, .mi.md-18 { font-size: 18px; }
+.material-icons.md-24, .mi.md-24 { font-size: 24px; }
+.material-icons.md-36, .mi.md-36 { font-size: 36px; }
+.material-icons.md-48, .mi.md-48 { font-size: 48px; }
+
+/* Rules for using icons as black on a light background. */
+.material-icons.md-dark, .mi.md-dark { color: rgba(0, 0, 0, 0.54); }
+.material-icons.md-dark.md-inactive, .mi.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+
+/* Rules for using icons as white on a dark background. */
+.material-icons.md-light, .mi.md-light { color: rgba(255, 255, 255, 1); }
+.material-icons.md-light.md-inactive, .mi.md-inactive { color: rgba(255, 255, 255, 0.3); }
+
+/* Rules to rotate items */
+.material-icons.r90, .mi.r90 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.material-icons.r180, .mi.r180 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.material-icons.r270, .mi.r270 {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.material-icons.flip-horizontal, .mi.flip-horizontal {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.material-icons.flip-vertical, .mi.flip-vertical {
+  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}

data/app/assets/stylesheets/material_icons.outlined.css.erb

@@ -0,0 +1,37 @@
+/*
+ * CSS File of Material icons.
+ * CSS code based on:
+ * https://github.com/google/material-design-icons
+ */
+
+//= depend_on_asset "material-icons-outlined.woff2"
+//= depend_on_asset "material-icons-outlined.woff"
+
+/* Use the font */
+@font-face {
+  font-family: 'Material Icons Outlined';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons Outlined'),
+       local('MaterialIconsOutlined-Regular '),
+       url('<%= font_path('material-icons-outlined.woff2') %>') format('woff2'),
+       url('<%= font_path('material-icons-outlined.woff') %>') format('woff');
+}
+
+/* Add outlined styles */
+.material-icons.outlined,
+.mi.outlined {
+  font-family: 'Material Icons Outlined';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/material_icons.round.css.erb

@@ -0,0 +1,37 @@
+/*
+ * CSS File of Material icons.
+ * CSS code based on:
+ * https://github.com/google/material-design-icons
+ */
+
+//= depend_on_asset "material-icons-round.woff2"
+//= depend_on_asset "material-icons-round.woff"
+
+/* Use the font */
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons Round'),
+       local('MaterialIconsRound-Regular '),
+       url('<%= font_path('material-icons-round.woff2') %>') format('woff2'),
+       url('<%= font_path('material-icons-round.woff') %>') format('woff');
+}
+
+/* Add round styles */
+.material-icons.round,
+.mi.round {
+  font-family: 'Material Icons Round';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/material_icons.sharp.css.erb

@@ -0,0 +1,37 @@
+/*
+ * CSS File of Material icons.
+ * CSS code based on:
+ * https://github.com/google/material-design-icons
+ */
+
+//= depend_on_asset "material-icons-sharp.woff2"
+//= depend_on_asset "material-icons-sharp.woff"
+
+/* Use the font */
+@font-face {
+  font-family: 'Material Icons Sharp';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons Sharp'),
+       local('MaterialIconsSharp-Regular '),
+       url('<%= font_path('material-icons-sharp.woff2') %>') format('woff2'),
+       url('<%= font_path('material-icons-sharp.woff') %>') format('woff');
+}
+
+/* Add round styles */
+.material-icons.sharp,
+.mi.sharp {
+  font-family: 'Material Icons Sharp';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}

data/app/assets/stylesheets/material_icons.twotone.css.erb

@@ -0,0 +1,37 @@
+/*
+ * CSS File of Material icons.
+ * CSS code based on:
+ * https://github.com/google/material-design-icons
+ */
+
+//= depend_on_asset "material-icons-twotone.woff2"
+//= depend_on_asset "material-icons-twotone.woff"
+
+/* Use the font */
+@font-face {
+  font-family: 'Material Icons TwoTone';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons TwoTone'),
+       local('MaterialIconsTwoTone-Regular '),
+       url('<%= font_path('material-icons-twotone.woff2') %>') format('woff2'),
+       url('<%= font_path('material-icons-twotone.woff') %>') format('woff');
+}
+
+/* Add round styles */
+.material-icons.twotone,
+.mi.twotone {
+  font-family: 'Material Icons TwoTone';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -moz-font-feature-settings: 'liga';
+  -moz-osx-font-smoothing: grayscale;
+}