ngx-md-icon

Easily use Material Design Icons @mdi/js with Angular

https://materialdesignicons.com/

# Install the Angular component
npm i -S ngx-md-icon

# Install the js icon package
npm i -S @mdi/js

⇨ DEMO

Compatibility

✅ Angular Material 15+ (MDC) ✅ Angular Material 2+ 😊️ More compatibility contributions welcome

Browse icons

To find your required icon, it is recommendable to use this browser extension, as it has a lot better performance than the website. https://github.com/Pictogrammers/Browser-Icon-Picker

Basic recommended usage

In order to easily benefit from tree shaking, this library uses the @mdi/js icons. This decision makes it also much easier to create your own application based icon mapping.

Create your global icon library for your app e.g. src/core/icons.ts with the following schema:

import { mdiForklift, mdiSlashForward } from '@mdi/js';

export const APP_ICONS = {
   industryVehicle: mdiForklift,
   strike: mdiSlashForward,
};

Now import the icons in your component.

import { Component } from '@angular/core';
import { APP_ICONS } from '../../core/icons';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
})
export class AppComponent {
   public icons = APP_ICONS;
}

// Single icon
<md-icon [icon]="icons.industryVehicle"></md-icon>

// Stack multiple icons
<md-icon [icons]="[icons.industryVehicle, icons.strike]"></md-icon>

// Text
<md-icon [texts]="['CocaCola']" [xViewBox]="80" [yViewBox]="48" [yTextPos]="29"></md-icon>
<md-icon [texts]="['EK']" [icon]="icons.person" class="person-overlay"></md-icon>

// Vertical align middle
<span>Cold <md-icon [icon]="icons.arrowLeftRight" middle></md-icon> Warm</span>

Usage with Angular Material

The component should work out of the box with Angular Material.

<button mat-icon-button>
   <md-icon [icons]="[icons.industryVehicle, icons.strike]"></md-icon>
</button>

Styling

Each icon/path inside an icon stack has a unique reference. Let's create a red stroked blue forklift icon.

<md-icon [icons]="[icons.industryVehicle, icons.strike]" 
         class="stroked-forklift"></md-icon>

.stroked-forklift {
   ::ng-deep {
      .icon-0 {
         color: blue;
      }
      .icon-1 {
         transform: scale(1.5);
         transform-origin: center;
         color: red;
      }  
   }
}