Change the size of a widget icon

[Dirk_Vandervoort]

When creating a calcite-icon in HTML, one use's scale to specify the size of the icon.

<calcite-icon icon="banana" scale="l"/>

Where creating a widget in JS, you specify the calcite icon by name (available HERE) : 

const homeWidget = new Home({
     view: mapView,
     icon: "banana"
});

The icon on the widget is scaled to "s" (small) by default. There is no apparent way to scale the icon when instantiating the widget in code. The CSS is beyond me at this time.

How can I scale the icon? I want "l".

TIA

[ColleenDixon]

I've had some success with this with ArcGISExpand using CSS, I have not had success with it using ESRI widgets such as ArcGISHome, ArcGISZoom, etc.  This is what I used for the icons on ArcGISExpand:

        calcite-icon:not([icon="view-hide"], [icon="view-visible"]) {

            width: 24px !important;

            height: 24px !important;

            inline-size: 24px;

            block-size: 24px;

            min-inline-size: 24px;

            min-block-size: 24px;

        }

Note that some ESRI widgets have calcite-icons in the widget, and if that particular widget doesn't have a shadow-dom, this will impact that widget.  In the example above I omitted view-visible and view-hide because it caught the visibility icon on ArcGISLayerList

I believe there's actually an issue out there that you can upvote to be able to pass in the desired scale, don't have that link handy though, I'm sorry!