Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

providers: icons mis-aligned

See original GitHub issue

Bug Report or Feature Request (mark with an x)

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

OS and Version?

macOS Mojave


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.
Captura de Pantalla 2019-04-15 a la(s) 16 02 14

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:

Unchecking that style in DevTools gives: Captura de Pantalla 2019-04-15 a la(s) 16 02 30

The log given by the failure


Desired functionality

Provider icons aligned correctly within their buttons.

Mention any other details that might be useful


  1. Set encapsulation: ViewEncapsulation.None on your container component
  2. Set this SCSS
ngx-auth-firebaseui {
  mat-icon {
    vertical-align: middle !important;

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:14 (11 by maintainers)

github_iconTop GitHub Comments

AnthonyNahascommented, Apr 27, 2019

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…

AnthonyNahascommented, Feb 16, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Misaligned - Free medical icons - Flaticon
Free vector icon. Download thousands of free icons of medical in SVG, PSD, PNG, EPS format or as ICON FONT.
Read more >
How to Fix Windows 10 Desktop Icons Moving After Rebooting
Step 1: Right-click the empty space on the desktop, then select View and uncheck Align icons to grid. Step 2: If not, then...
Read more >
Icon/Desktop Alignment Issues - Microsoft Community
So "Align icons to grid" & "Show desktop icons" are toggled, I removed the toggle from "Auto arrange icons" - positioned my icons...
Read more >
How to align title at layout center in TopAppBar?
I needed centered title for TopAppBar with navigation icon on the left side only or with two icons on the left and right...
Read more >
iPhone 7 Control Center top screen issue - Apple Community
... the Control Center's top screen becomes misaligned. ... wifi signal, screen rotation lock, gps, and battery icons are not on the top ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found