Announcing Custom Icons! (File Uploads)

SharpTools.io (web) Announcements
1

We’re excited to announce the release of the popularly requested Custom Icons feature!

image
image1048×641 68.6 KB

:warning: When you start using custom icons, be sure to refresh the browser on your other devices to pull in the latest ‘app’ changes so custom icons work there too! Otherwise you might end up with missing tiles on devices that haven’t been refreshed.

:white_check_mark: This closes out the Custom User Icons feature request!

As part of this release, you’ll find a brand new Files tab in the Manage Resources section of your User Page. You can either drag files from your desktop onto the page or tap the upload button at the bottom of the screen to upload an image.

When you edit a tile and go to select an icon, you’ll see a new tab interface that enables you to switch between the normal System icons and your own Media Library.

image
image819×696 87.7 KB

For convenience, you can also upload images from this view. By default, tapping an uploaded media item will select it for use in your tile. You can also tap the Enable Edit Mode link in the bottom right corner to enable the multi-selection and ability to view/delete items. Just make sure to switch back out of edit mode if you want to select an icon.

Custom CSS User? (Tap to expand)

Impact to Custom CSS

Note that if you are using Custom CSS and are targeting the icon/svg elements in the following tile types, you may have to update your CSS. With the introduction of Custom Icons, we also standardized some of the html/classes so icons are more consistent across all tiles.

I’ve used shorthand CSS declarations to describe the changes along with a descriptive note, but if you need more details on anything, feel free to ask.

  • Hyperlink Tile, Rule Tile
    • Before: .main-content.icon > svg
    • After: .main-content > .icon > .svg
    • .icon is now a separate sub-element of the .main-content for consistency
  • Number Variable Tile, String Variable Tile, Hero Attribute, Temperature Sensor
    • Before: .data > svg.data-icon.icon
    • After: .data > div.data-icon.icon > svg
    • svg is now a sub-element of .icon for consistency
  • Color Control (with Circle Background)
    • Before: .icon > .icon-circle-holder > .icon-circle, .icon > svg
    • After: .icon-circle-holder > .icon-circle, .icon > svg
    • The .icon-circle-holder is now a sibling of the .icon so the inner content of .icon remains consistent

Check out the related help article for more details and Frequently Asked Questions:

6 Likes
2

Great work! I look forward to making use of this feature.

1 Like
3

This is great. I sometimes forget what an icon is that I chose for something :slight_smile: ; now I can be specific for certain use cases.

1 Like