providers: icons mis-aligned

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

OS and Version?

macOS Mojave

Versions

Angular CLI: 7.3.8
Node: 10.15.3
OS: darwin x64
Angular: 7.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.8
@angular-devkit/build-angular     0.13.8
@angular-devkit/build-optimizer   0.13.8
@angular-devkit/build-webpack     0.13.8
@angular-devkit/core              7.3.8
@angular-devkit/schematics        7.3.8
@angular/cdk                      7.3.7
@angular/cli                      7.3.8
@angular/fire                     5.1.2
@angular/flex-layout              7.0.0-beta.24
@angular/material                 7.3.7
@ngtools/webpack                  7.3.8
@schematics/angular               7.3.8
@schematics/update                0.13.8
rxjs                              6.4.0
typescript                        3.2.4
webpack                           4.29.0

"ngx-auth-firebaseui": "^2.6.0",

Repro steps

1. Use <ngx-auth-firebaseui></ngx-auth-firebaseui> in an otherwise empty component.

It looks like Angular Material may have changed some of the DOM structure or styling of icons within buttons.

It appears to be caused by this line:

https://github.com/AnthonyNahas/ngx-auth-firebaseui/blob/ff8b86e19ee4abc7d3f0f99d2fba432e7f702585/src/module/components/providers/auth.providers.component.scss#L11

Unchecking that style in DevTools gives:

The log given by the failure

N/A

Desired functionality

Provider icons aligned correctly within their buttons.

Mention any other details that might be useful

Workaround:

1. Set encapsulation: ViewEncapsulation.None on your container component
2. Set this SCSS

ngx-auth-firebaseui {
  mat-icon {
    vertical-align: middle !important;
  }
}

[AnthonyNahas]

How can we fix that ?

if I remove mat-icon { vertical-align: inherit; }

this would not be rendered correctly in my apps. However, this would maybe work only for apps that have been created new from scratch…

I’ve added a new demo app

ng new demo ng add @angular/material ng add ngx-auth-firebaseui

and you had right… the icons will be mis-aligned…

[AnthonyNahas]

v4 is now release

https://github.com/AnthonyNahas/ngx-auth-firebaseui/releases/tag/4.0.0 https://www.npmjs.com/package/ngx-auth-firebaseui

this should be fixed now congrats all ❤️