Hero Attribute Tile: Icon Only Display (None for Primary Attribute)

For the Hero Attribute tile, it would be helpful there was an option of “None” for the Primary Attribute that could be selected if you want the tile to be Icon Only.

Hey @kampto - thanks for posting the feature request. I split the two requests out into their own individual posts. The second part of the request can be found here:

Add 'Icon' to Hero Attribute Tile Theme / Style Customizations

@josh Just following on from this feature request. I think my issue is aligned with this request but wanted to confirm. I have a tile that I want to tie to a hyperlink. So I used hero to then select the switch and put two states in for on and off with different icons selected. All looks good but I still get On/Off on the tile. If I am doing this correctly then I would expect to get an icon here? Or is this what the OP is referring to in this feature request? Thanks.

Screen Shot 2021-08-13 at 8.32.22 AM

The states need to be lowercase to match the raw state from Hubitat/SmartThings.


This is referring to wanting to only display an icon in as the main content and not display a primary attribute at all. When a tile is configure with an icon, you see the icon and the primary attribute.


From what I understand, kampto is looking for a ‘None’ option for the primary attribute, so you would see only the icon.



Today, you would have to use some Custom CSS to accomplish this. Maybe something like:

/* Hide the 'value' for Hero Attribute Tiles that use 'switch' as the primary attribute */
.tile.hero-attribute [data-attribute="switch"] .value { display: none }
/* Fix the margin of the icon so it's centered */
.tile.hero-attribute [data-attribute="switch"] svg { margin: initial!important }

As usual, any CSS snippets provided are not officially supported and may have to be tweaked with future updates to the SharpTools web app. :slight_smile:

Thanks - I was looking to do exactly what the OP was asking, and the CSS snippet does great. Also, thanks for the cue on the lower case. I was mistakenly looking at the display information not the tile vs. the hubitat device.

1 Like

Awesome. Would love to have this as an option in the hero attribute but this css is a nice workaround.