Inherit icon size to font size of text in button

[lstraka-telekom]

Hi,

I have something like this :

<scale-button
    variant="ghost" 
    type="button"
    icon-position="after"
    size="small"
  >
   button-label
    <scale-icon-user-file-attachment size="16"></scale-icon-user-file-attachment>
  </scale-button>

Here in the code if I remove size="16" from the icon, the icon is much higher than the text in button (button-label). Is it somehow possible make it "dynamic" if button use size=small than also icon should inherit that ? or at least use the same "naming" for size="small" also in icon ? not use direct numbers? It is useful if I need to have larger icon to set its size with a number but not all the time.

Maybe it is actually somehow possible, but my question related to the usage of button with icon, if button has attribute size="small" than I have to manually do set <icon-XX size="16"/> .

One possible solution should be to allow for size attribute in icon types: number | 'small' | 'large' as allowed types similar also to the size attribute used in button, and in that case, the "font-size" should use same size for button text and icon also ? Or maybe I am just missing some "docs" how to correctly use that ?

[acstll]

Hey @lstraka-telekom thanks for bringing this up.

You're totally right it would make sense to kind of "link" the size of the icon to the size of the button, without having to manually set it. We aim for a nice balance between out-of-the-box and flexibility.

I'm gonna forward this to the team to discuss the possible ways to improve this.

What would be your preferred solution out of the options you mentioned?

[lstraka-telekom]

Hi @acstll
For me the better way would be to keep also possibility to manually change the size also for the icon, but in case if no size attribute is presented in <icon> then try to inherit size from a parrent, because I think in most cases is used as a child component inside something <button> or <link> or whatever just only some <span> and in that case it should be helpfull if size will be by default using parent font-size. I am familiar to that because in other project we using fontawesome icons, and here the size of the icon is always inherited from a parent. I know that it is a little bit other way how icons works, but it was user-friendly also from a developer point of view, that I am not aware of setting size for the icon, but also it was possible to make the icon smaller or larger on demand. Simple example should be also using <icon> inside the <h1><icon/></h1>

But I am here only as a consumer I have no experiences in web-components and its behaviour so I do not know how it in the background works :D

So if you plan something or implement something than just let me know about that ...

[acstll]

That's really great feedback. Thank you!

We're exploring the "fontawesome" approach, where icon size would react to context's font size (the h1 example is really interesting).

And we're definitely adding some "magic" to set the icon's size accordingly when inside a scale-button or scale-link and no value is set.