Angular Material Icons Registration in Visual Studio 2013

0
votes

I am new to angular material, just want to use its icons, have been reading about it but says I have to register it but don't know exactly how to get the set of svg icons. What I did: 1. downloaded icons from by using the URL

1: http://google.github.io/material-design-icons/ from the section enter image description here 2. Placed all the icons under md/icons/..... and configured it as 

.config(function ($mdIconProvider) {
  $mdIconProvider.defaultIconSet('md/icons/core-icons.svg', 24);
})

But don't know how to get the sets and use them in app. can someone guide me here.

Thanks.

3
javascriptangularjsangularjs-material

3 Answers

1
votes

Steps to Setup Google Material Icons with Angular Material

Following these 5 steps, I use Material Icons in projects following Amit Shukla guidelines.

  1. In your head element of your index.html.

      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

  2. Within a utilities folder, I set up a custom material module.

    import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule,NoopAnimationsModule } from 
'@angular/platform-browser/animations';
import {
           MatButtonModule,
           MatCheckboxModule,
           MatFormFieldModule,
           MatDialogModule,
           MatTabsModule,
           MatProgressSpinnerModule,
           MatMenuModule,
           MatIconModule,
           MatInputModule,
           MatSelectModule,
           MatToolbarModule,
           MatCardModule,
           MatChipsModule,
           MatListModule,
           MatTooltipModule,
           MatNativeDateModule,
           MatDatepickerModule,
           MatTableModule,
           MatPaginatorModule,
           MatProgressBarModule,
           MatSortModule,
           MatSnackBarModule,
           MatStepperModule,
           MatGridListModule,
           MatExpansionModule,
           MatRadioModule,
           MatBadgeModule
           } from '@angular/material';
   import {BrowserModule} from '@angular/platform-browser';
   import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
   import {DomSanitizer} from '@angular/platform-browser';
   import {MatIconRegistry} from '@angular/material';
   @NgModule({
       imports: [
           FormsModule,
           ReactiveFormsModule,
           BrowserAnimationsModule,
           MatButtonModule,
        MatCheckboxModule,
        MatFormFieldModule,
        MatDialogModule,
        MatTabsModule,
        MatProgressSpinnerModule,
        MatMenuModule,
        MatIconModule,
        MatInputModule,
        MatSelectModule,
        MatToolbarModule,
        MatCardModule,
        MatChipsModule,
        MatListModule,
        MatTooltipModule,
        MatNativeDateModule,
        MatDatepickerModule,
        MatTableModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatSortModule,
        MatSnackBarModule,
        MatStepperModule,
        MatGridListModule,
        MatBadgeModule,
        MatExpansionModule,
        MatRadioModule,
        MatBadgeModule
        ],
    exports: [
        BrowserAnimationsModule,
        MatButtonModule,
        MatFormFieldModule,
        MatCheckboxModule,
        MatTabsModule,
        MatProgressSpinnerModule,
        MatMenuModule,
        MatIconModule,
        MatInputModule,
        MatSelectModule,
        MatToolbarModule,
        MatCardModule,
        MatChipsModule,
        MatListModule,
        MatTooltipModule,
        MatNativeDateModule,
        MatDatepickerModule,
        MatTableModule,
        MatPaginatorModule,
        MatProgressBarModule,
        MatSortModule,
        MatSnackBarModule,
        MatStepperModule,
        MatGridListModule,
        MatBadgeModule,
        MatExpansionModule,
        MatRadioModule,
        MatBadgeModule
        ],
    declarations: []
    })
    export class CustommaterialModule {
        constructor(iconRegistry: MatIconRegistry, sanitizer:DomSanitizer) 
             {
                iconRegistry.addSvgIcon(
                    'linkedin',
                    sanitizer.bypassSecurityTrustResourceUrl('../../assets/icons/linkedin.svg'));
             }
     }

  3. Place your svg icon inside the icons folder which is inside of the assets folder

    /app
/assets
   /icons
       linkedin.svg

  4. Add your CustomMaterialModule and BrowserAnimationsModule or NoopAnimationsModule to your imports in your app.module.ts

    import { BrowserAnimationsModule, NoopAnimationsModule } from 
'@angular/platform-browser/animations';
import { CustommaterialModule } from './utilities/custommaterial.module';

  5. Inside your component.html

    <mat-icon matTooltip="Write any pop up info"
svgIcon="linkedin">LinkedIn </mat-icon>
0
votes

Another way (not including every line of every file for brevity):

  1. Add the MatIconModule to app.module.ts
import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [MatIconModule]
})
  1. Add the MatIconRegistry and DomSanitizer to app.component.ts
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {}
}
  1. Add the svg icons you wish to use to the constructor in AppComponent
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'name-of-icon',
      sanitizer.bypassSecurityTrustResourceUrl('path-to-icon-in-your-app')
    );
  }
}

The name-of-icon will be the name you use in the html template. The path-to-icon-in-your-app is the location in your app where the icon file is located. Ideally, this is in the assets folder.

  1. Add the icon to your html template, app.component.html in this case
<mat-icon svgIcon="name-of-icon"></mat-icon>
0
votes

Google Material Icons

By default, Angular Material supports Google Material Icons, although it won't automatically add the icons for you. (Also, you don't have to use app.config!)

  1. Add the following line to your HTML under <head>:

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500" rel="stylesheet"> <!-- <- Note: this also includes the Roboto font -->

Note: More info here

  1. Use it via the <md-icon> directive (Replacing menu with the icon that you want; a list of icons are available on Material.io:

    <md-icon>menu</md-icon>

Example:

angular.module('App', ['ngMaterial']);
<html ng-app="App">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

<body>
  <md-icon>menu</md-icon>
</body>

</html>

Icon sets

Alternatively, you can use an icon set. Follow the instructions below:

  1. Download the icon set (for example MaterialDesignIcons > mdi.svg and place it somewhere in your project (such as your assets folder) which you can get from.

    MaterialDesignIcons - Getting Started (AngularJS Material) <code>assets</code> folder

  2. Add a configuration for declaring the icon set under app.config:

    angular.module('App', ['ngMaterial'])
    .config(function($mdIconProvider, $sceDelegateProvider) {
        $mdIconProvider.defaultIconSet('path/to/icons.svg');
        // Note: If you want to get a svg iconset from another domain, add $sceDelegateProvider to function as follows:
        $sceDelegateProvider.resourceUrlWhitelist(
            // Adding 'self' to the whitelist will allow requests from the current origin.
            'self',
            // Allow from all URLs
            // Note: It's recommended to only specify the given domain you want to allow.
            '**'
    )
})

  3. Use it via the <md-icon> directive, but add an md-svg-icon attribute to it with the name of the SVG icon you want: 

    <md-icon md-svg-icon="menu"></md-icon>

Example: 

    angular.module('App', ['ngMaterial'])
    .config(function($mdIconProvider, $sceDelegateProvider) {
      $sceDelegateProvider.resourceUrlWhitelist([
        'self',
        '**'
      ])
  $mdIconProvider.defaultIconSet('https://edricchan03.github.io/res/mdi.svg');
})
<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>

<body>
  <md-icon md-svg-icon="plus"></md-icon>
</body>

</html>