Widen Expand Widget button and display text instead of icon

[DavidMarley]

We have a client request to display the word "Legend" in a button on the map, that will expand/open a legend panel (in this case a custom div we have created, not the Legend widget).  So basically want to make one Expand button wider, and include text instead of the typical icon. Is there a pattern for doing this? And/or examples?  I know we can just forgo the Expand widget and create our own button to place over the map - and we may end up doing that - but first want to see if there's a reasonable way to do this with the Expand widget. 

In theory we should be able to use the ExpandViewModel to make the Expand button look however we want, right? It's hard to follow where to start with that though, based on the existing doc and samples.

Thanks in advance for any thoughts/suggestions.

[DavidMarley · Accepted solution]

We figured out a solution for this using CSS - the main thing being hiding the icon so the fallback text displays instead. Then we widened the icon to accommodate the text label.

Here is the CSS we apply (note in the Expand widget expandTooltip = 'Legend', hence we can select that element via title='Legend'):

div[title='Legend' i] {
 width: 62px;
 height: 32px;
 .esri-collapse__icon {
 display: none;
 }
 .esri-icon-font-fallback-text {
 width: auto;
 height: 13px;
 clip: auto;
 font-size: 12px;
 font-family: arial !important;
 }
}

[_____]

Is there a better solution than this now? Id' rather not mess with CSS for this. I see Expand has a label property, but I'm not sure what it even does.