Force same Icon/Item Height

[IzeQube]

Is there any way to force Dashy to always use same icon height?

I'm using some icons I found on the net and some of them have different sizes.

Plex and Node-Red are quite a bit heigher then the other three items.

[Lissy93]

Heya,
So by default icons all have the same width and (as you mentioned) an automatic height. This is because if the height and width were both fixed, the icon would become stretched if it was not a perfect square.

I've made some changes for you in e65d447 (which will be merged in PR #201 this evening), which set some height and width boundaries, and use object-fit: cover; which will slightly improve this :)

But I think you're best solution would be to use a bit of CSS to modify this behavior, the selector you're looking for is img.tile-icon

[Lissy93]

Here's some example styles that you can use, to reverse the dimensions (fixed height, auto width)

Either put this in the Custom CSS option under the Config menu, like:

img.tile-icon {
  width: auto !important;
  height: 2rem;
}

Or, from the config file:

appConfig:
  customCss: 'img.tile-icon { width: auto !important; height: 2rem; }'

This should solve your issue, and you could use any dimensions here...
Hope that helps :)

[IzeQube]

Thanks for the hint. When I tried it like you said the icons aren't centered.

But I used the following custom style that seems to do the trick in my case:

div.item-icon {
    justify-content: center;
    align-items: center;
    display: flex;
}

img.tile-icon.large {
    height: 3rem;
}