[SM-342] Password Toggle directive (#3850)

libs/components/src/button/button.component.html

@@ -1,5 +1,6 @@
 <span class="tw-relative">
   <span [ngClass]="{ 'tw-invisible': loading }">
+    <i class="bwi bwi-lg" [ngClass]="iconClass" aria-hidden="true" *ngIf="icon"></i>
     <ng-content></ng-content>
   </span>
   <span

libs/components/src/button/button.component.ts

@@ -76,7 +76,16 @@ export class ButtonComponent implements ButtonLikeAbstraction {
   }
 
   @Input() buttonType: ButtonTypes = null;
+
   @Input() block?: boolean;
+
   @Input() loading = false;
+
   @Input() disabled = false;
+
+  @Input("bitIconButton") icon: string;
+
+  get iconClass() {
+    return [this.icon, "!tw-m-0"];
+  }
 }

libs/components/src/button/button.stories.ts

@@ -101,3 +101,17 @@ export const Block = BlockTemplate.bind({});
 Block.args = {
   block: true,
 };
+
+const IconTemplate: Story = (args) => ({
+  props: args,
+  template: `
+    <button bitButton [bitIconButton]="icon" buttonType="primary" class="tw-mr-2"></button>
+    <button bitButton [bitIconButton]="icon"buttonType="secondary" class="tw-mr-2"></button>
+    <button bitButton [bitIconButton]="icon" buttonType="danger" class="tw-mr-2"></button>
+  `,
+});
+
+export const Icon = IconTemplate.bind({});
+Icon.args = {
+  icon: "bwi-eye",
+};