SVG icons have different size than font icons given the same size

[jmanuelh]

Bug Report

SVG icons have different size than font icons given the same size

Steps

Expected Result

All icons should render the same size given the same size

Actual Result

Font icons render bigger than SVG icons

Version

0.10.0

[joheredi]

Also noticed that SVG icons render with a different color and don't have the same hover behavior as Font Icons when in Menu. For example:

[levithomason]

Sizing

There is some work in progress right now, #384, to address this. The issue is that the current SVG view boxes include padding which they should not. Once resolved, the SVGs will appear the same size as the font icons when used side-by-side.

Color

Also noticed that SVG icons render with a different color and don't have the same hover behavior as Font Icons when in Menu. For example:

This is due to "Home" item being the "active" item. Clicking through the items helps show this:

🐞 BUG There does appear to be a bug in the Teams theme with proper application of the color to the fill property for the SVG icons. There is some icon work in progress right now, #384, to address this. The goal is for SVG icons and font icons to be able to be used side-by-side without having to be concerned with it as a feature developer.

[levithomason]

@codepretty ^

[levithomason]

Heads up, the Teams theme will not have any font icons. There are SVGs that are currently being ported over.

[kuzhelov]

with recent adjustments provided to icons is not an issue anymore (starting from v0.13.1) 👍