fix(stark-demo): fix icons not displaying correctly

- add StarkSvgViewBoxModule to shared modules - offset icon slightly to compensate @angular/material update - update icon scaling functionality after correct `starkSvgViewBox` implementation ISSUES CLOSED: NationalBankBelgium#504 NationalBankBelgium#1030
carlo-nomes · Jan 15, 2019 · 181ada1 · 181ada1
1 parent 1747275
commit 181ada1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 7 deletions.
diff --git a/packages/stark-ui/assets/styles/_material-fixes.scss b/packages/stark-ui/assets/styles/_material-fixes.scss
@@ -19,3 +19,9 @@
     display: block;
   }
 }
+
+// Needed since @angular/Material v7, the icons are slightly off center.
+// 2.5px was chosen as the offset that worked best across most popular browsers
+.mat-button-wrapper .mat-icon {
+  margin-top: -2.5px;
+}
diff --git a/packages/stark-ui/assets/themes/_button-theme.scss b/packages/stark-ui/assets/themes/_button-theme.scss
@@ -1,3 +1,5 @@
+$small-icon-size: 18px;
+
 @mixin stark-button-color($color, $contrast) {
   &.mat-button,
   &.mat-icon-button,
@@ -49,9 +51,9 @@
 .mat-white {
   @include stark-button-color(#fff, $dark-primary-text);
 }
-
 .mat-icon.stark-small-icon {
-  transform: scale(0.75);
+  height: $small-icon-size;
+  width: $small-icon-size;
 }
 
 .mat-button,

diff --git a/showcase/src/app/app.module.ts b/showcase/src/app/app.module.ts
@@ -58,7 +58,6 @@ import {
 	StarkLanguageSelectorModule,
 	StarkMessagePaneModule,
 	StarkSessionUiModule,
-	StarkSvgViewBoxModule,
 	StarkToastNotificationModule
 } from "@nationalbankbelgium/stark-ui";
 import { SharedModule } from "./shared/shared.module";
@@ -228,7 +227,6 @@ export const metaReducers: MetaReducer<State>[] = ENV !== "production" ? [logger
 		StarkAppSidebarModule.forRoot(),
 		StarkLanguageSelectorModule,
 		StarkMessagePaneModule.forRoot(),
-		StarkSvgViewBoxModule,
 		StarkDatePickerModule,
 		StarkMinimapModule,
 		StarkToastNotificationModule.forRoot({

diff --git a/showcase/src/app/shared/shared.module.ts b/showcase/src/app/shared/shared.module.ts
@@ -6,7 +6,7 @@ import { MatTabsModule } from "@angular/material/tabs";
 import { MatTooltipModule } from "@angular/material/tooltip";
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
-import { StarkPrettyPrintModule } from "@nationalbankbelgium/stark-ui";
+import { StarkPrettyPrintModule, StarkSvgViewBoxModule } from "@nationalbankbelgium/stark-ui";
 import { TranslateModule } from "@ngx-translate/core";
 import { FlexLayoutModule } from "@angular/flex-layout";
 import { ExampleViewerComponent, ReferenceBlockComponent, TableOfContentsComponent } from "./components";
@@ -23,11 +23,12 @@ import { FileService } from "./services";
 		MatTabsModule,
 		CommonModule,
 		StarkPrettyPrintModule,
-		TranslateModule
+		TranslateModule,
+		StarkSvgViewBoxModule
 	],
 	providers: [FileService],
 	declarations: [ExampleViewerComponent, ReferenceBlockComponent, TableOfContentsComponent],
 	entryComponents: [],
-	exports: [ExampleViewerComponent, ReferenceBlockComponent, TableOfContentsComponent, FlexLayoutModule]
+	exports: [ExampleViewerComponent, ReferenceBlockComponent, TableOfContentsComponent, FlexLayoutModule, StarkSvgViewBoxModule]
 })
 export class SharedModule {}