diff --git a/src/app/app.component.html b/src/app/app.component.html
index ffe7f2fcc..7a0464966 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,7 @@
 <div>
   <ly-toolbar [withClass]="classes.header" bg="primary" elevation="3">
-    <button ly-icon-button (click)="nav.toggle()" class="material-icons">
-      menu
+    <button ly-icon-button (click)="nav.toggle()">
+      <ly-icon>menu</ly-icon>
     </button>
     <ly-toolbar-item class="logo">
       <button ly-button color="primary:contrast" sensitive [routerLink]="['./']">
diff --git a/src/lib/icon/icon.ts b/src/lib/icon/icon.ts
index 6e148d4ad..65676a6db 100644
--- a/src/lib/icon/icon.ts
+++ b/src/lib/icon/icon.ts
@@ -6,7 +6,7 @@ import { Platform, LyTheme2 } from '@alyle/ui';
 @Directive({
   selector: 'ly-icon'
 })
-export class Icon implements OnChanges, OnInit {
+export class Icon implements OnInit {
   private _defaultClass = 'material-icons';
   private _src: string;
   private _icon: string;
@@ -77,6 +77,7 @@ export class Icon implements OnChanges, OnInit {
   }
 
   ngOnInit() {
+    this._updateClass();
     this.theme.addStyle('lyIconRoot', theme => (
       `font-size:${theme.icon.fontSize};` +
       `width:1em;` +
@@ -85,10 +86,6 @@ export class Icon implements OnChanges, OnInit {
     ), this.elementRef.nativeElement);
   }
 
-  ngOnChanges() {
-    this._updateClass();
-  }
-
   /**
    * run only browser
    * remove current icon