{"id":13637553,"url":"https://github.com/Angelmmiguel/material_icons","last_synced_at":"2025-04-19T08:34:30.056Z","repository":{"id":991314,"uuid":"36580690","full_name":"Angelmmiguel/material_icons","owner":"Angelmmiguel","description":"A simple Rails wrapper for Google Material Icons","archived":false,"fork":false,"pushed_at":"2022-11-27T21:32:14.000Z","size":2968,"stargazers_count":290,"open_issues_count":3,"forks_count":62,"subscribers_count":12,"default_branch":"master","last_synced_at":"2024-10-02T23:48:12.125Z","etag":null,"topics":["css","css-icon","gem","html","material-icons","rails","rails-asset-pipeline","rails-engine"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Angelmmiguel.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-31T00:04:29.000Z","updated_at":"2024-09-06T16:34:32.000Z","dependencies_parsed_at":"2023-01-13T11:45:13.252Z","dependency_job_id":null,"html_url":"https://github.com/Angelmmiguel/material_icons","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angelmmiguel%2Fmaterial_icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angelmmiguel%2Fmaterial_icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angelmmiguel%2Fmaterial_icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Angelmmiguel%2Fmaterial_icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Angelmmiguel","download_url":"https://codeload.github.com/Angelmmiguel/material_icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223795271,"owners_count":17204137,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-icon","gem","html","material-icons","rails","rails-asset-pipeline","rails-engine"],"created_at":"2024-08-02T00:01:19.260Z","updated_at":"2024-11-09T06:31:25.842Z","avatar_url":"https://github.com/Angelmmiguel.png","language":"Ruby","funding_links":[],"categories":["Icons"],"sub_categories":["Dev"],"readme":"[![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)\n\n![Material Icons for Rails](https://raw.githubusercontent.com/Angelmmiguel/material_icons/master/material.png)\n\n# Material Icons for Rails\n\n[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).\n\n**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.\n\n# Installation\n\nTo install the gem, add this line to your `Gemfile`:\n\n\tgem 'material_icons'\n\nThen, execute `bundle install`.\n\n# CSS\n\nIn your `app/assets/stylesheets/application.css.erb` file you need to reference material icons CSS.\n\nAdd this line at top of `application.css`:\n\n```css\n/*\n*= require material_icons\n*/\n```\n\n**NOTE**: Depending on the comment style of `application.css`, you may need to add `//= require material_icons` instead of the previous line. See [Rails Asset Pipeline](http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) for more info.\n\nThese files provide multiple CSS classes to use in your views. Main classes are:\n\n``` \n.material-icons, .mi\n```\n\n## Upgrade from v2.X to 4.X\n\nThe `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:\n\n```ruby\n# In v2.X\nmi.face\n\n# In v4.X\nmi.shape(:face)\n```\n\nWhen upgrading to v4.X, you will need to update all the calls to the `mi` and `material_icon` helpers.\n\n## Other styles\n\nThis 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.\n\nEvery 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.\n\n### Outlined\n\n```css\n/*\n*= require material_icons.outlined\n*/\n```\n\nUsage in your template:\n\n```\n\u003c%= material_icon.shape(:face).outlined %\u003e\n# \u003ci class=\"material-icons outlined\"\u003eface\u003c/i\u003e \n```\n\n### Sharp\n\n```css\n/*\n*= require material_icons.sharp\n*/\n```\n\nUsage in your template:\n\n```\n\u003c%= material_icon.shape(:face).sharp %\u003e\n# \u003ci class=\"material-icons sharp\"\u003eface\u003c/i\u003e \n```\n\n### Round\n\n```css\n/*\n*= require material_icons.round\n*/\n```\n\nUsage in your template:\n\n```\n\u003c%= material_icon.shape(:face).round %\u003e\n# \u003ci class=\"material-icons round\"\u003eface\u003c/i\u003e \n```\n\n### Two Tone\n\n```css\n/*\n*= require material_icons.twotone\n*/\n```\n\nUsage in your template:\n\n```\n\u003c%= material_icon.shape(:face).twotone %\u003e\n# \u003ci class=\"material-icons twotone\"\u003eface\u003c/i\u003e \n```\n\n## Helper classes\n\nThis gem includes several helper sizes. To add them to your project, add the following stylesheet:\n\n```css\n/*\n*= require material_icons.helpers\n*/\n```\n\nAfter adding it, the following helpers will be available:\n\n```\n/* Size */\n.md-18\n.md-24\n.md-36\n.md-48\n\n/* Color */\n.md-dark\n.md-light\n\n/* Rotation */\n.r90\n.r180\n.r270\n.flip-horizontal\n.flip-vertical\n```\n\nDon't forget to see material_icons.css.erb ;).\n\n# Views\n\nGoogle Material Icons uses a feature called ligatures. We can define the icon in the text of the HTML tag. Go to [Google Guide](https://google.github.io/material-design-icons/#using-the-icons-in-html) to get more info.\n\nAn example of icon is:\n\n```html\n\u003ci class=\"material-icons\"\u003eface\u003c/i\u003e\n\u003ci class=\"material-icons md-36\"\u003eface\u003c/i\u003e\n```\n\n## Ruby helpers\n\nMaterial 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)**.\n\nUsing same example:\n\n```\n\u003c%= material_icon.shape(:face) %\u003e\n# \u003ci class=\"material-icons\"\u003eface\u003c/i\u003e\n\n\u003c%= material_icon.shape(:face).md_36 %\u003e\n# \u003ci class=\"material-icons md-36\"\u003eface\u003c/i\u003e\n\n# You can use string too\n\u003c%= material_icon.shape('3d_rotation').md_36 %\u003e\n# \u003ci class=\"material-icons md-36\"\u003e3d_rotation\u003c/i\u003e\n\n# Rotation and custom css class\n\u003c%= mi.shape(:face).r90.css_class('my_class') %\u003e\n# \u003ci class=\"material-icons r90 my_class\"\u003eface\u003c/i\u003e\n\n# Custom css and data attributes\n\u003c%= mi.shape(:face).css_class('my_class').html(data: {id: 1}) %\u003e\n# \u003ci data-id=\"1\" class=\"material-icons my_class\"\u003eface\u003c/i\u003e\n```\n\nAllowed methods are:\n\n```\n# Rotation methods\nr90\nr180\nr270\nflip_horizontal\nflip_vertical\n\n# Size methods\nmd_18\nmd_24\nmd_36\nmd_48\n\n# Add some classes to the icon\ncss_class('classes')\n\n# Add style to the icon\nstyle('margin-top: 5px;')\n\n# Add some HTML attributes to an icon. This method receive a Hash\nhtml({ data: { id: 1 } })\n```\n\nRemember this is a helper, you always can use HTML syntax ;).\n\n# Compatibility\n\nLigature feature requires a supported browser:\n\nBrowser | Version\n---- | ----\nGoogle Chrome | \u003e= 11\nMozilla Firefox | \u003e= 3.5\nApple Safari | \u003e= 5\nMicrosoft IE | \u003e= 10\nOpera | \u003e= 15\nApple MobileSafari | \u003e= iOS 4.2\nAndroid Browser | \u003e= 3.0\n\nYou can find the current browser support in [_can I use?_](https://caniuse.com/kerning-pairs-ligatures).\n\n# Common issues\n\n## Slim templating engine\n\nIf 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)).\n\n```\np.text\n  == material_icon.shape(:search).md_18\n```\n\nReference [#9](https://github.com/Angelmmiguel/material_icons/issues/9)\n\n## Couldn't find file 'material_icons'\n\n```\ncouldn't find file 'material_icons' with type 'application/javascript'\n```\n\nThis error is related with the asset compilation of Rails. To fix it, just follow these steps:\n\n* Confirm that you [required the Material Icons CSS in your main CSS file](#CSS)\n* Check and remove any similar line of code from `app/assets/javascripts/application.js.erb`\n* Restart your rails server.\n\nReference [#10](https://github.com/Angelmmiguel/material_icons/issues/10)\n\n# Tested on\n\nTested with [GitHub Actions](https://github.com/Angelmmiguel/material_icons/actions?query=workflow%3ARuby).\n\nRuby versions:\n\n* 2.6\n* 2.7\n* 3.0\n* 3.1\n\nRails versions:\n\n* 6.0\n* 6.1\n* 7.0\n\n# They are using Material icons for Rails :)\n\n* [Materialup.com](http://www.materialup.com): a big community to share, discover and learn about Material Design.\n* [Easy Bills](https://www.easybills.io): a free tool to manage your finances.\n* [Notebook.ai](https://www.notebook.ai/): your digital notebook is here. Notebook.ai grows with your ideas and collaborates back with you.\n\n# License\n\nGoogle 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)_.\n\nMaterial Icons gem is released under the MIT license. Copyright [Angel M Miguel](https://angel.kiwi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngelmmiguel%2Fmaterial_icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAngelmmiguel%2Fmaterial_icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAngelmmiguel%2Fmaterial_icons/lists"}