From a17accb51b7d5fb4d018f0346dc8d12c80585010 Mon Sep 17 00:00:00 2001
From: Dmitry Nehaychik <4dmitr@gmail.com>
Date: Wed, 11 Sep 2019 15:39:07 +0300
Subject: [PATCH] =?UTF-8?q?fix(button):=20make=20sure=20icon=20has=20margi?=
 =?UTF-8?q?ns=20when=20button=20has=20html=20co=E2=80=A6=20(#1953)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/button/button.component.ts     |  6 +++---
 src/framework/theme/components/helpers.ts           | 13 +++++++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/framework/theme/components/button/button.component.ts b/src/framework/theme/components/button/button.component.ts
index fb400d47d2..0e6b57d97e 100644
--- a/src/framework/theme/components/button/button.component.ts
+++ b/src/framework/theme/components/button/button.component.ts
@@ -19,7 +19,7 @@ import {
 import { NbComponentStatus } from '../component-status';
 import { NbComponentShape } from '../component-shape';
 import { NbComponentSize } from '../component-size';
-import { convertToBoolProperty } from '../helpers';
+import { convertToBoolProperty, firstChildNotComment, lastChildNotComment } from '../helpers';
 
 export type NbButtonAppearance = 'filled' | 'outline' | 'ghost' | 'hero';
 
@@ -528,14 +528,14 @@ export class NbButtonComponent implements AfterViewInit {
   get iconLeft(): boolean {
     const el = this.hostElement.nativeElement;
     const icon = this.iconElement;
-    return !!(icon && el.firstChild === icon);
+    return !!(icon && firstChildNotComment(el) === icon);
   }
 
   @HostBinding('class.icon-end')
   get iconRight(): boolean {
     const el = this.hostElement.nativeElement;
     const icon = this.iconElement;
-    return !!(icon && el.lastChild === icon);
+    return !!(icon && lastChildNotComment(el) === icon);
   }
 
   @HostBinding('class.transitions')
diff --git a/src/framework/theme/components/helpers.ts b/src/framework/theme/components/helpers.ts
index 2766e98f79..55ebf4f159 100644
--- a/src/framework/theme/components/helpers.ts
+++ b/src/framework/theme/components/helpers.ts
@@ -26,3 +26,16 @@ export function getElementHeight(el) {
   return el.offsetHeight + marginTop + marginBottom;
 }
 
+export function firstChildNotComment(node: Node) {
+  const children = Array
+    .from(node.childNodes)
+    .filter((child: Node) => child.nodeType !== Node.COMMENT_NODE);
+  return children[0];
+}
+
+export function lastChildNotComment(node: Node) {
+  const children = Array
+    .from(node.childNodes)
+    .filter((child: Node) => child.nodeType !== Node.COMMENT_NODE);
+  return children[children.length - 1];
+}