SVG images are not displayed correctly on some pages

[universewrld]

I found that on the default @Joomla Login page, if 2-FA is enabled on the website, the SVG login icon for 2-FA is displayed incorrectly in my template on @Gantry 5:

at the same time, in the default Cassiopeia Joomla template there is no such problem with displaying this icon:

also SVG icons are displayed incorrectly on the 404 Error page in my Gantry template:

on all other pages of my Gantry template, SVG icons in the drop-down menu are displayed as expected:

yes, this is a bug in Gantry with displaying SVG icons on some types of pages, because the default Cassiopeia template from Joomla has no problem displaying SVG icons on the same pages.

Joomla 5.2, Gantry 5.5.19

[N8Solutions]

Yes, this is a problem. I've usually just corrected it on my own by adding css to the custom.scss file. However, it should be fixed.

[N8Solutions]

As an FYI for you @universewrld, and anyone else who finds this. This issue can easily be fixed by adding the following code to your custom.scss file. For anyone not familiar with how to do this, you can refer to the Gantry 5 documentation here.

// Fix SVG icon size in buttons
.plg_system_webauthn_login_button {
    svg {
        width: 30px;
        margin: 4px;
    }
}
svg {
  vertical-align: middle;
}

Also, depending on the template, this styling may also need to be adjusted so there is symmetry with the padding above and below the SVG icon inside the button.

.login {
    .plg_system_webauthn_login_button {
        padding: 0.9rem 0rem;
        min-height: 60px;
    }
}

Tagging @hexplor so he can add this to the next update of Gantry 5.