{"id":29623897,"url":"https://github.com/mikemitterer/dart-material-icons","last_synced_at":"2026-05-07T17:32:12.956Z","repository":{"id":28878712,"uuid":"32403173","full_name":"MikeMitterer/dart-material-icons","owner":"MikeMitterer","description":null,"archived":false,"fork":false,"pushed_at":"2017-12-13T09:04:45.000Z","size":7243,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-16T06:44:20.836Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MikeMitterer.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-03-17T15:45:52.000Z","updated_at":"2016-11-16T12:40:19.000Z","dependencies_parsed_at":"2022-07-24T12:02:01.796Z","dependency_job_id":null,"html_url":"https://github.com/MikeMitterer/dart-material-icons","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/MikeMitterer/dart-material-icons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fdart-material-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fdart-material-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fdart-material-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fdart-material-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MikeMitterer","download_url":"https://codeload.github.com/MikeMitterer/dart-material-icons/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MikeMitterer%2Fdart-material-icons/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266242072,"owners_count":23898102,"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":[],"created_at":"2025-07-21T05:08:22.651Z","updated_at":"2026-05-07T17:32:12.926Z","avatar_url":"https://github.com/MikeMitterer.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dart Material SVG Icons\n### Optimized for Dart + SASS\n\n[Material Design Icons][materialicons] are the official open-source icons featured in the Google Material Design specification.\nThis project provides this icon-set for Dart.\n \n## What's cool\nGoogles original version comes \"only\" with black or white SVGs.  \n**material_icons** allows you to **theme** your icons!!!  \nTested with Chrome, Safari, FF + IE.\n\n![Screenshot][screenshot]\n\n## Usage\n* Clone the [\"purple\"][purple] example\n  - Your main.scss should look something like this:\n  ```css\n  $icon-color: nth($palette-primary, 2);\n  @import \"packages/material_icons/sass/svg-utils\";\n  @import \"material_icons\";\n  ``` \n* Open \u003ca href=\"https://rawgit.com/MikeMitterer/dart-material-icons/master/lib/sass/index.html\" target=\"_blank\"\u003e[this]\u003c/a\u003e page\n  - Use Chrome or Safari for this!\n* Click on icon that you want to include in your project\n* Copy the **_material-icons.scss** section\n* Paste it into your _material-icons.scss\n```css\n@import 'packages/material_icons/sass/action/svg/production/ic_account_box_18px';\n\n.bg-ic_account_box_18px {\n    @include svg-background(\"18\");\n    \n    /* you can exclude or delete this line */\n    @include svg-fallback(\"action/svg/production/ic_account_box_18px.svg\",\"action/2x_web/ic_account_box_black_18dp.png\",\"action/2x_web/ic_account_box_white_18dp.png\",\"action/2x_web/ic_account_box_grey600_18dp.png\");\n    \n    background-image: svg-ic_account_box_18px($icon-color);\n}\n```\n* Copy the **index.html** section\n* Paste it into your index.html\n```html\n    \u003cdiv class=\"bg-ic_favorite_24px svg-size-24 svg-bg\"\u003e\u003c/div\u003e\n```\n* In main.scss define your icon-color: `$icon-color : #9B30FF;`\n* In web/styles: **sass main.scss main.css -r ../packages/material_icons/sassext/urlencode.rb**\n* and: **autoprefixer main.css**\n\n**Note:**\nYou may ask what the hack???? does that mean:  \n-r ../packages/material_icons/sassext/urlencode.rb  \nYou are adding a custom ruby-function to sass - here it is urlencode(...).  \nThe inline SVG get urlencoded and makes IE happy.  \n\nThat's it.    \nYour page should look like \u003ca href=\"https://rawgit.com/MikeMitterer/dart-material-icons/master/example/purple/web/index.html\" target=\"_blank\"\u003e[this]\u003c/a\u003e page   \n\n###Play with your index.html###\n\n```html\n\u003cbody class=\"no-svg fallback-white\"\u003e\n    \u003cdiv class=\"bg-ic_favorite_24px svg-size-24 svg-bg\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"bg-ic_account_balance_24px svg-size-24 svg-bg fallback-grey\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"bg-ic_accessibility_48px svg-size-48 svg-bg\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n```\n**no-svg** - turns off svg and uses png's instead  \n**fallback-white** | **fallback-black** | **fallback-grey** - PNG color to use  \nThis option can also be specified per div (line 3).    \n\nYou can [see](http://wsk.mikemitterer.at/) a [reallife] sample using this technique on [wsk.mikemitterer.at](http://wsk.mikemitterer.at/) \n\n## Features and bugs\n\nPlease file feature requests and bugs at the [issue tracker][tracker].\n\n### License\n\n    Copyright 2016 Michael Mitterer (office@mikemitterer.at),\n    IT-Consulting and Development Limited, Austrian Branch\n\n    Licensed under the Apache License, Version 2.0 (the \"License\");\n    you may not use this file except in compliance with the License.\n    You may obtain a copy of the License at\n\n       http://www.apache.org/licenses/LICENSE-2.0\n\n    Unless required by applicable law or agreed to in writing,\n    software distributed under the License is distributed on an\n    \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,\n    either express or implied. See the License for the specific language\n    governing permissions and limitations under the License.\n    \nIf this plugin is helpful for you - please [(Circle)](http://gplus.mikemitterer.at/) me  \nor **star** this repo here on GitHub.\n      \n[tracker]: https://github.com/MikeMitterer/dart-material-icons/issues\n[live]: https://rawgit.com/MikeMitterer/dart-material-icons/master/lib/sass/index.html\n[materialicons]: https://github.com/google/material-design-icons\n[purple]: https://github.com/MikeMitterer/dart-material-icons/tree/master/example/purple\n[screenshot]: https://github.com/MikeMitterer/dart-material-icons/raw/master/lib/sass/screenshot.png?raw=true\n[reallife]: https://github.com/MikeMitterer/dart-wsk-material/tree/master/example\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikemitterer%2Fdart-material-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmikemitterer%2Fdart-material-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmikemitterer%2Fdart-material-icons/lists"}