Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/templarian/materialdesign-angular-material
@mdi/angular-material Dist for Material Design Icons.
https://github.com/templarian/materialdesign-angular-material
angular angular-material material-design material-ui
Last synced: 3 months ago
JSON representation
@mdi/angular-material Dist for Material Design Icons.
- Host: GitHub
- URL: https://github.com/templarian/materialdesign-angular-material
- Owner: Templarian
- License: other
- Created: 2018-03-24T22:00:21.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-03-12T12:44:12.000Z (11 months ago)
- Last Synced: 2024-10-30T18:32:37.633Z (3 months ago)
- Topics: angular, angular-material, material-design, material-ui
- Language: JavaScript
- Homepage: https://materialdesignicons.com
- Size: 6.43 MB
- Stars: 19
- Watchers: 6
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> *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.
# Angular Material - Material Design Icons
Angular Material distribution for the [Material Design Icons](https://materialdesignicons.com).
## Installation
Install `@mdi/angular-material` and `@angular/cdk` from npm:
```bash
npm install @mdi/angular-material @angular/cdk
```
## Usage
This bundle is usable with AngularJS Material/Angular Material and to facilitate usage, it's recommended to use
[`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin).
Add the following plugin configuration in the Webpack configuration:
```javascript
new CopyWebpackPlugin([
{ from: 'node_modules/@mdi/angular-material/mdi.svg',
to: 'assets/mdi.svg'
}
]);
```
Or if you're using the Angular CLI, make sure to include `mdi.svg` in your `assets`
folder under the [Angular workspace configuration file](https://angular.io/guide/workspace-config)
in the `assets` array, located in the build configuration for your project:
```json Angular workspace configuration file
{
// ...
"architect": {
"build": {
"options": {
"assets": [
{ "glob": "**/*", "input": "./assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "./", "output": "./" },
{ "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
]
}
}
}
// ...
}
```
Note that the input directory is dependent on the workspace root which can be found
by looking at your desired project's `root` property. (For more information, visit the
Angular documentation on [project configuration options](https://angular.io/guide/workspace-config#project-configuration-options).)
Additionally, see the Angular documentation on [assets configuration](https://angular.io/guide/workspace-config#assets-configuration)
for more information.
Note: Documentation for Angular CLI versions 1.x.x (around Angular v5) has been dropped
as Angular v5 is [no longer supported](https://angular.io/guide/releases#support-policy-and-schedule).
### Angular Material
The `mdi.svg` contains all the icons provided on the site. It can be used inline with
[MatIconRegistry](https://material.angular.io/components/icon/api#MatIconRegistry).
1. In your app's main module (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material/icon`:
```typescript App module
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatIconRegistry, MatIconModule } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
// ...
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
// Required by the Angular Material icon module
HttpClientModule,
// ...
MatIconModule
]
})
export class AppModule {
constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
matIconRegistry.addSvgIconSet(
domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
);
}
}
```
2. The SVG icons can then be used with [`MatIcon`](https://material.angular.io/components/icon/api#MatIcon)'s
`svgIcon` attribute as shown below:
```html Example Usage
```
For more information about SVG icons, check out the [documentation](https://material.angular.io/components/icon/overview#svg-icons).
[StackBlitz demo](https://stackblitz.com/edit/mdi-material-example)
### AngularJS Material
The `mdi.svg` contains all the icons provided on the site. Use inline with [`$mdIconProvider`](https://material.angularjs.org/latest/api/service/$mdIconProvider).
```javascript Configuration
var app = angular.module('myApp', ['ngMaterial']);
app.config(function($mdIconProvider) {
$mdIconProvider
.defaultIconSet('assets/mdi.svg')
});
```
#### Usage
```html Example Usage
```
## Related Packages
[NPM @MDI Organization](https://npmjs.com/org/mdi)
* SVG: [MaterialDesign-SVG](https://github.com/Templarian/MaterialDesign-SVG)
* Webfont: [MaterialDesign-Webfont](https://github.com/Templarian/MaterialDesign-Webfont)
## Learn More
* [MaterialDesignIcons.com](https://materialdesignicons.com)
* [Templarian/MaterialDesign](https://github.com/Templarian/MaterialDesign)