Feature Request: Support width/height properties for element-icon

[ashish-kus]

Add support for width and height CSS properties on element-icon to allow rectangular icons instead of square-only.

Current Behavior

element-icon {
  size: 100px; /* ✅ Works - creates 100x100px square */
  width: 200px; /* ❌ Ignored */
  height: 80px; /* ❌ Ignored */
}

Requested Feature

element-icon {
  width: 200px; /* ✅ Icon width */
  height: 80px; /* ✅ Icon height */
}

Use Case

Better space utilization in grid layouts - more apps visible without scrolling:

Current (square):     Proposed (rectangular):
┌──────┐ ┌──────┐        ┌──────┐ ┌──────┐ ┌──────┐
│      │ │      │   VS   │ Icon │ │ Icon │ │ Icon │
│      │ │      │        └──────┘ └──────┘ └──────┘
└──────┘ └──────┘

Backward Compatibility

Keep existing size property working. Priority: size > width/height if both present.

[DaveDavenport]

There is a squared property on the icon widget that is default enabled. You can turn this off to get the icon in the aspect ratio of the image. (this won't work to well in the element-icon case)
squared on

squared off

When testing this I also found a bug in resize/redraw code that is interesting to fix.

Conclusion, I think it is a good idea to add.

[voodoobox]

Yeah the squared: false; declaration on element-icon renders a "blurry" image in my tests.

[DaveDavenport]

Can you test the redraw-fixes branch?

[voodoobox]

I will with pleasure, just let me get over this Christmas hang over!

[voodoobox]

Alrighty, did some tests with the redraw-fixes branch with a couple of different wide ratio formats (which I was really in need of) and I was very happy with the results. It worked jolly fine.

I noticed that when using a custom width and height on element-icon, the declaration of "squared: false;" makes the element-icon disappear. Therefore, feels like a deprecated declaration since width and height is already defining the icon dimensions and thus, indirectly the image-icon proportion/ratio.

Another thing, in order to show the layout of 3 wide images side-by-side (screenshot bellow) in a fixed grid, I learnt that we must use "layout: vertical" in listview while keeping "columns: 3;" and "lines: 1;". Even though I went for a horizontal look, looks like Rofi's grid logic (columns) only works correctly in vertical layout mode.

Bellow a couple of screenshots of my custom rofi menu for selecting waybar themes for reference:

(500x80px image icons)

(850x60px image icons)

[DaveDavenport]

thanks for testing.. The layout thing is something that should be fixed.

The branch has some very nice improvements, but needs more work to make it behave correctly. (there is a big chicken and egg problem.. the layout is more based on its content and should size better.. but that also gets more redraw/resize calculations, as you only know the exact size after (async) loading of images.)
Just need to find more time..