{"id":18954365,"url":"https://github.com/templarian/materialdesign-angular-material","last_synced_at":"2025-04-17T05:23:53.615Z","repository":{"id":54782738,"uuid":"126643723","full_name":"Templarian/MaterialDesign-Angular-Material","owner":"Templarian","description":"@mdi/angular-material Dist for Material Design Icons.","archived":false,"fork":false,"pushed_at":"2024-03-12T12:44:12.000Z","size":6745,"stargazers_count":19,"open_issues_count":2,"forks_count":6,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-13T08:06:23.993Z","etag":null,"topics":["angular","angular-material","material-design","material-ui"],"latest_commit_sha":null,"homepage":"https://materialdesignicons.com","language":"JavaScript","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/Templarian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-24T22:00:21.000Z","updated_at":"2023-08-27T08:29:42.000Z","dependencies_parsed_at":"2024-06-18T16:46:43.982Z","dependency_job_id":"7b66fc41-0cd8-4fdf-b4a7-435f57a67d08","html_url":"https://github.com/Templarian/MaterialDesign-Angular-Material","commit_stats":{"total_commits":71,"total_committers":6,"mean_commits":"11.833333333333334","dds":"0.12676056338028174","last_synced_commit":"d377ceff95681532fd2d2ce4a4ee1c4917c142e7"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-Angular-Material","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-Angular-Material/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-Angular-Material/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Templarian%2FMaterialDesign-Angular-Material/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Templarian","download_url":"https://codeload.github.com/Templarian/MaterialDesign-Angular-Material/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249184604,"owners_count":21226419,"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":["angular","angular-material","material-design","material-ui"],"created_at":"2024-11-08T13:44:46.779Z","updated_at":"2025-04-16T02:32:58.165Z","avatar_url":"https://github.com/Templarian.png","language":"JavaScript","readme":"\u003e *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Angular Material files only.\r\n\r\n# Angular Material - Material Design Icons\r\n\r\nAngular Material distribution for the [Material Design Icons](https://materialdesignicons.com).\r\n\r\n## Installation\r\n\r\nInstall `@mdi/angular-material` and `@angular/cdk` from npm:\r\n\r\n```bash\r\nnpm install @mdi/angular-material @angular/cdk\r\n```\r\n\r\n## Usage\r\n\r\nThis bundle is usable with AngularJS Material/Angular Material and to facilitate usage, it's recommended to use\r\n[`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin).\r\n\r\nAdd the following plugin configuration in the Webpack configuration:\r\n\r\n```javascript\r\nnew CopyWebpackPlugin([\r\n  { from: 'node_modules/@mdi/angular-material/mdi.svg',\r\n    to: 'assets/mdi.svg'\r\n  }\r\n]);\r\n```\r\n\r\nOr if you're using the Angular CLI, make sure to include `mdi.svg` in your `assets`\r\nfolder under the [Angular workspace configuration file](https://angular.io/guide/workspace-config)\r\nin the `assets` array, located in the build configuration for your project:\r\n\r\n    ```json Angular workspace configuration file\r\n    {\r\n       // ...\r\n       \"architect\": {\r\n         \"build\": {\r\n           \"options\": {\r\n             \"assets\": [\r\n               { \"glob\": \"**/*\", \"input\": \"./assets/\", \"output\": \"./assets/\" },\r\n               { \"glob\": \"favicon.ico\", \"input\": \"./\", \"output\": \"./\" },\r\n               { \"glob\": \"mdi.svg\", \"input\": \"./node_modules/@mdi/angular-material\", \"output\": \"./assets\" }\r\n             ]\r\n           }\r\n         }\r\n       }\r\n       // ...\r\n    }\r\n    ```\r\n\r\nNote that the input directory is dependent on the workspace root which can be found\r\nby looking at your desired project's `root` property. (For more information, visit the\r\nAngular documentation on [project configuration options](https://angular.io/guide/workspace-config#project-configuration-options).)\r\n\r\nAdditionally, see the Angular documentation on [assets configuration](https://angular.io/guide/workspace-config#assets-configuration)\r\nfor more information.\r\n\r\nNote: Documentation for Angular CLI versions 1.x.x (around Angular v5) has been dropped\r\nas Angular v5 is [no longer supported](https://angular.io/guide/releases#support-policy-and-schedule).\r\n\r\n### Angular Material\r\n\r\nThe `mdi.svg` contains all the icons provided on the site. It can be used inline with\r\n[MatIconRegistry](https://material.angular.io/components/icon/api#MatIconRegistry).\r\n\r\n1. In your app's main module (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material/icon`:\r\n\r\n```typescript App module\r\n\r\nimport { BrowserModule } from '@angular/platform-browser';\r\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\r\nimport { NgModule } from '@angular/core';\r\nimport { MatIconRegistry, MatIconModule } from '@angular/material/icon';\r\nimport { DomSanitizer } from '@angular/platform-browser';\r\n\r\nimport { HttpClientModule } from '@angular/common/http';\r\n\r\n// ...\r\n@NgModule({\r\n  imports: [\r\n    BrowserModule,\r\n    BrowserAnimationsModule,\r\n    // Required by the Angular Material icon module\r\n    HttpClientModule,\r\n    // ...\r\n    MatIconModule\r\n  ]\r\n})\r\nexport class AppModule {\r\n  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){\r\n    matIconRegistry.addSvgIconSet(\r\n      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n2. The SVG icons can then be used with [`MatIcon`](https://material.angular.io/components/icon/api#MatIcon)'s\r\n`svgIcon` attribute as shown below:\r\n\r\n```html Example Usage\r\n\u003cmat-icon svgIcon=\"\u003cname of icon\u003e\"\u003e\u003c/mat-icon\u003e\r\n```\r\n\r\nFor more information about SVG icons, check out the [documentation](https://material.angular.io/components/icon/overview#svg-icons).\r\n\r\n[StackBlitz demo](https://stackblitz.com/edit/mdi-material-example)\r\n\r\n### AngularJS Material\r\n\r\nThe `mdi.svg` contains all the icons provided on the site. Use inline with [`$mdIconProvider`](https://material.angularjs.org/latest/api/service/$mdIconProvider).\r\n\r\n```javascript Configuration\r\n\r\nvar app = angular.module('myApp', ['ngMaterial']);\r\napp.config(function($mdIconProvider) {\r\n  $mdIconProvider\r\n    .defaultIconSet('assets/mdi.svg')\r\n});\r\n\r\n```\r\n\r\n#### Usage\r\n\r\n```html Example Usage\r\n\r\n\u003cmd-icon md-svg-icon=\"android\"\u003e\u003c/md-icon\u003e\r\n\u003cmd-button aria-label=\"Android\" class=\"md-icon-button\"\u003e\r\n  \u003cmd-icon md-svg-icon=\"android\"\u003e\u003c/md-icon\u003e\r\n\u003c/md-button\u003e\r\n\r\n```\r\n\r\n## Related Packages\r\n\r\n[NPM @MDI Organization](https://npmjs.com/org/mdi)\r\n\r\n* SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)\r\n* Webfont: [MaterialDesign-Webfont](https://github.com/Templarian/MaterialDesign-Webfont)\r\n\r\n## Learn More\r\n\r\n* [MaterialDesignIcons.com](https://materialdesignicons.com)\r\n* [Templarian/MaterialDesign](https://github.com/Templarian/MaterialDesign)\r\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemplarian%2Fmaterialdesign-angular-material","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftemplarian%2Fmaterialdesign-angular-material","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftemplarian%2Fmaterialdesign-angular-material/lists"}