The Noob's (in)complete guide to CSS for Hubitat

If you want to use different icons for the tiles, but still want them to change with on/off, you can replace what the content is to one of the other available icons (this icon library is also possible with some additional modifications, see below), but all he icons listed in this post will work.

Eg. to make all motion icons when inactive to be an up arrow and active a down arrow:

.he-motion-sensor:before {
    content: "\ea3a";
}
.he-running:before {
    content: "\ea3e";
}

To use it with the icons from material.io (not ALL exist, most do, but try and you'll know):

.he-motion-sensor:before {
    font-family: 'Material Icons' !important;
    content: "pause";
}
.he-running:before {
    font-family: 'Material Icons' !important;
    content: "play_arrow";
}

These are all the original ones found in the tiles editor (can be found in a style tag in the html code of the HE):

.he-add_1:before{
    content:"\e906"
}
.he-add_2:before{
    content:"\e909"
}
.he-advanced_1:before{
    content:"\e916"
}
.he-apps_1:before{
    content:"\ea32"
}
.he-apps_2:before{
    content:"\ea33"
}
.he-community_1:before{
    content:"\ea36"
}
.he-community_2:before{
    content:"\ea37"
}
.he-devices_1:before{
    content:"\ea47"
}
.he-devices_2:before{
    content:"\ea48"
}
.he-discovery_1:before{
    content:"\ea4b"
}
.he-discovery_3:before{
    content:"\ea4d"
}
.he-events_2:before{
    content:"\ea5c"
}
.he-exclude_1:before{
    content:"\ea5e"
}
.he-exclude_3:before{
    content:"\ea60"
}
.he-help_1:before{
    content:"\ea62"
}
.he-help_2:before{
    content:"\ea63"
}
.he-hubevents_2:before{
    content:"\ea66"
}
.he-info_1:before{
    content:"\ea68"
}
.he-info_3:before{
    content:"\ea6a"
}
.he-location_1:before{
    content:"\ea6c"
}
.he-location_3:before{
    content:"\ea6e"
}
.he-locationevents_2:before{
    content:"\ea73"
}
.he-logs_2:before{
    content:"\ea75"
}
.he-logs_4:before{
    content:"\ea77"
}
.he-reboothub_1:before{
    content:"\e918"
}
.he-reboothub_2:before{
    content:"\e919"
}
.he-repair_1:before{
    content:"\e93a"
}
.he-repair_2:before{
    content:"\ea12"
}
.he-settings_1:before{
    content:"\ea17"
}
.he-shutdown_1:before{
    content:"\ea79"
}
.he-shutdown_3:before{
    content:"\ea7b"
}
.he-acceleration_active:before{
    content:"\ebd3"
}
.he-acceleration_inactive:before{
    content:"\ebd9"
}
.he-address-book1:before{
    content:"\e944"
}
.he-aid-kit:before{
    content:"\e998"
}
.he-air_filter:before{
    content:"\ecc7"
}
.he-alarm:before{
    content:"\e950"
}
.he-alarm1:before{
    content:"\ecc9"
}
.he-alarm_2:before{
    content:"\ecc8"
}
.he-alexa:before{
    content:"\ed31"
}
.he-amazon2:before{
    content:"\eaf4"
}
.he-android1:before{
    content:"\eac0"
}
.he-apple1:before{
    content:"\eaf8"
}
.he-appointment:before{
    content:"\ecca"
}
.he-apps_11:before{
    content:"\ea05"
}
.he-apps_21:before{
    content:"\ea06"
}
.he-arrival:before{
    content:"\eccb"
}
.he-arrow-down-left2:before{
    content:"\ea3f"
}
.he-arrow-down-right2:before{
    content:"\ea3d"
}
.he-arrow-down2:before{
    content:"\ea3e"
}
.he-arrow-left2:before{
    content:"\ea40"
}
.he-arrow-right2:before{
    content:"\ea3c"
}
.he-arrow-up-left2:before{
    content:"\ea39"
}
.he-arrow-up-right2:before{
    content:"\ea3b"
}
.he-arrow-up2:before{
    content:"\ea3a"
}
.he-attachment:before{
    content:"\e9cd"
}
.he-axis:before{
    content:"\eaf3"
}
.he-axis_2:before{
    content:"\eaf2"
}
.he-axis_3:before{
    content:"\ed6a"
}
.he-backward2:before{
    content:"\ea1f"
}
.he-barcode1:before{
    content:"\e937"
}
.he-bathtub1:before{
    content:"\ed33"
}
.he-battery_25:before{
    content:"\ec54"
}
.he-battery_25_color:before{
    content:"\ebdc"
}
.he-battery_25_filled:before{
    content:"\ec53"
}
.he-battery_50:before{
    content:"\ec56"
}
.he-battery_50_color:before{
    content:"\ebdd"
}
.he-battery_50_filled:before{
    content:"\ec55"
}
.he-battery_75_color:before{
    content:"\ebde"
}
.he-battery_75_to_100:before{
    content:"\ec57"
}
.he-battery_empty:before{
    content:"\ec59"
}
.he-battery_empty_filled:before{
    content:"\ec58"
}
.he-battery_full:before{
    content:"\ec5a"
}
.he-battery_full_color:before{
    content:"\ebe2"
}
.he-battery_large:before{
    content:"\eccd"
}
.he-battery_large_filled:before{
    content:"\eccc"
}
.he-battery_low_color:before{
    content:"\ebe3"
}
.he-beach-chair:before{
    content:"\ec4e"
}
.he-bed_1:before{
    content:"\eb0d"
}
.he-bed_2:before{
    content:"\ed34"
}
.he-bed_3:before{
    content:"\eb0e"
}
.he-bed_4:before{
    content:"\eb0f"
}
.he-bed_5:before{
    content:"\ed35"
}
.he-bell1:before{
    content:"\e951"
}
.he-bin:before{
    content:"\e9ac"
}
.he-bin2:before{
    content:"\e9ad"
}
.he-blind1:before{
    content:"\ecb6"
}
.he-blocked:before{
    content:"\ea0e"
}
.he-bluetooth1:before{
    content:"\eb11"
}
.he-bluetooth_headphones:before{
    content:"\eb10"
}
.he-book1:before{
    content:"\e91f"
}
.he-bookmark1:before{
    content:"\e9d2"
}
.he-bookmarks:before{
    content:"\e9d3"
}
.he-books:before{
    content:"\e920"
}
.he-box-add:before{
    content:"\e95e"
}
.he-box-remove:before{
    content:"\e95f"
}
.he-briefcase1:before{
    content:"\e9ae"
}
.he-brightness-contrast:before{
    content:"\e9d6"
}
.he-bubble:before{
    content:"\e96b"
}
.he-bubble2:before{
    content:"\e96e"
}
.he-bubbles:before{
    content:"\e96c"
}
.he-bubbles2:before{
    content:"\e96d"
}
.he-bubbles3:before{
    content:"\e96f"
}
.he-bubbles4:before{
    content:"\e970"
}
.he-bug1:before{
    content:"\e999"
}
.he-bulb_1:before{
    content:"\ecda"
}
.he-bulb_2:before{
    content:"\ecdb"
}
.he-bulb_4:before{
    content:"\ec68"
}
.he-bulb_6:before{
    content:"\eb12"
}
.he-bulb_off:before{
    content:"\ebe4"
}
.he-bulb_on:before{
    content:"\ebec"
}
.he-calculator1:before{
    content:"\e940"
}
.he-calendar1:before{
    content:"\e953"
}
.he-calendar2:before{
    content:"\ecbe"
}
.he-calendar_2:before{
    content:"\ecdc"
}
.he-camera1:before{
    content:"\e90f"
}
.he-cancel-circle:before{
    content:"\ea0d"
}
.he-car1:before{
    content:"\ec69"
}
.he-cctv:before{
    content:"\ed36"
}
.he-cd_rom:before{
    content:"\eb13"
}
.he-ceiling_lamp:before{
    content:"\eb14"
}
.he-ceiling_lamp_2:before{
    content:"\ed37"
}
.he-chair_lounge:before{
    content:"\ed3b"
}
.he-chandelier_2:before{
    content:"\eb15"
}
.he-checkbox-checked:before{
    content:"\ea52"
}
.he-checkbox-unchecked:before{
    content:"\ea53"
}
.he-checkmark:before{
    content:"\ea10"
}
.he-checkmark2:before{
    content:"\ea11"
}
.he-chrome1:before{
    content:"\ead9"
}
.he-circle-down:before{
    content:"\ea43"
}
.he-circle-left:before{
    content:"\ea44"
}
.he-circle-right:before{
    content:"\ea42"
}
.he-circle-up:before{
    content:"\ea41"
}
.he-circuit:before{
    content:"\ecdd"
}
.he-clean:before{
    content:"\ec6a"
}
.he-cleaning_1:before{
    content:"\ec6b"
}
.he-cleaning_2:before{
    content:"\ec6c"
}
.he-cleaning_3:before{
    content:"\ec6d"
}
.he-clipboard1:before{
    content:"\e9b8"
}
.he-clock:before{
    content:"\e94e"
}
.he-clock2:before{
    content:"\e94f"
}
.he-cloud-check:before{
    content:"\e9c4"
}
.he-cloud-download1:before{
    content:"\e9c2"
}
.he-cloud-upload1:before{
    content:"\e9c3"
}
.he-cloud1:before{
    content:"\e9c1"
}
.he-co2:before{
    content:"\ecb7"
}
.he-codepen1:before{
    content:"\eae8"
}
.he-cog1:before{
    content:"\e994"
}
.he-cogs1:before{
    content:"\e995"
}
.he-color_palette:before{
    content:"\ecde"
}
.he-command:before{
    content:"\ea4e"
}
.he-compass1:before{
    content:"\e949"
}
.he-compass2:before{
    content:"\e94a"
}
.he-computer:before{
    content:"\ecb0"
}
.he-computer_2:before{
    content:"\eb16"
}
.he-connection:before{
    content:"\e91b"
}
.he-contact_closed:before{
    content:"\eb91"
}
.he-contact_open:before{
    content:"\eb92"
}
.he-contrast:before{
    content:"\e9d5"
}
.he-copy1:before{
    content:"\e92c"
}
.he-crop1:before{
    content:"\ea57"
}
.he-cross:before{
    content:"\ea0f"
}
.he-ctrl:before{
    content:"\ea50"
}
.he-customer_support:before{
    content:"\eaeb"
}
.he-danger:before{
    content:"\ecbb"
}
.he-dashboard1:before{
    content:"\ecb2"
}
.he-dashboards:before{
    content:"\ecdf"
}
.he-database1:before{
    content:"\e964"
}
.he-default_dashboard_icon:before{
    content:"\e93b"
}
.he-delicious1:before{
    content:"\eacd"
}
.he-dimmer_high:before{
    content:"\ebff"
}
.he-dimmer_low:before{
    content:"\ec10"
}
.he-dimmer_medium:before{
    content:"\ec17"
}
.he-dining-chair:before{
    content:"\ecc2"
}
.he-dinner:before{
    content:"\ecc3"
}
.he-discover:before{
    content:"\eaec"
}
.he-display:before{
    content:"\e956"
}
.he-door-1:before{
    content:"\ecbc"
}
.he-door_3:before{
    content:"\ec6e"
}
.he-door_closed:before{
    content:"\ec6f"
}
.he-door_enter:before{
    content:"\ec70"
}
.he-door_exit_2:before{
    content:"\ec71"
}
.he-door_lock:before{
    content:"\ed3c"
}
.he-door_open:before{
    content:"\ec72"
}
.he-door_remote:before{
    content:"\ed3d"
}
.he-download1:before{
    content:"\e960"
}
.he-download2:before{
    content:"\e9c5"
}
.he-download3:before{
    content:"\e9c7"
}
.he-downstairs:before{
    content:"\ed6c"
}
.he-drawer:before{
    content:"\e95c"
}
.he-drawer2:before{
    content:"\e95d"
}
.he-dribbble1:before{
    content:"\eaa7"
}
.he-drive:before{
    content:"\e963"
}
.he-drive1:before{
    content:"\eb20"
}
.he-drop:before{
    content:"\ec51"
}
.he-dropbox1:before{
    content:"\eaae"
}
.he-dryer:before{
    content:"\eb26"
}
.he-dryer_2:before{
    content:"\eb25"
}
.he-earth:before{
    content:"\e9ca"
}
.he-edge1:before{
    content:"\eadc"
}
.he-eject1:before{
    content:"\ea25"
}
.he-electricity:before{
    content:"\ece0"
}
.he-embed:before{
    content:"\ea7f"
}
.he-embed2:before{
    content:"\ea80"
}
.he-enlarge:before{
    content:"\e989"
}
.he-enlarge2:before{
    content:"\e98b"
}
.he-enter:before{
    content:"\ea13"
}
.he-envelop:before{
    content:"\e945"
}
.he-equalizer:before{
    content:"\e992"
}
.he-equalizer2:before{
    content:"\e993"
}
.he-ethernet:before{
    content:"\ecc6"
}
.he-exit:before{
    content:"\ea14"
}
.he-eye-blocked:before{
    content:"\e9d1"
}
.he-eye-minus:before{
    content:"\e9d0"
}
.he-eye-plus:before{
    content:"\e9cf"
}
.he-eye1:before{
    content:"\e9ce"
}
.he-eyedropper1:before{
    content:"\e90a"
}
.he-facebook1:before{
    content:"\ea90"
}
.he-facebook2:before{
    content:"\ea91"
}
.he-facebook3:before{
    content:"\eb2a"
}
.he-facebook_2:before{
    content:"\eb27"
}
.he-fan:before{
    content:"\ecb8"
}
.he-fan_2:before{
    content:"\eb2b"
}
.he-fan_auto:before{
    content:"\e980"
}
.he-fan_high:before{
    content:"\e9b0"
}
.he-fan_low:before{
    content:"\e9e4"
}
.he-fan_med:before{
    content:"\e9fc"
}
.he-fan_med_high:before{
    content:"\e9ec"
}
.he-fan_med_low:before{
    content:"\e9f4"
}
.he-fan_off:before{
    content:"\e93c"
}
.he-fan_on:before{
    content:"\ea04"
}
.he-feed1:before{
    content:"\e91d"
}
.he-file-empty:before{
    content:"\e924"
}
.he-file-music:before{
    content:"\e928"
}
.he-file-picture:before{
    content:"\e927"
}
.he-file-play:before{
    content:"\e929"
}
.he-file-text1:before{
    content:"\e922"
}
.he-file-text2:before{
    content:"\e926"
}
.he-file-video:before{
    content:"\e92a"
}
.he-file-zip:before{
    content:"\e92b"
}
.he-file1:before{
    content:"\eaee"
}
.he-file_2:before{
    content:"\eaed"
}
.he-files-empty:before{
    content:"\e925"
}
.he-film1:before{
    content:"\e913"
}
.he-filter1:before{
    content:"\ea5b"
}
.he-filter2:before{
    content:"\ed2d"
}
.he-finder:before{
    content:"\eabf"
}
.he-fingerprint:before{
    content:"\ecaf"
}
.he-fire-alarm:before{
    content:"\ecba"
}
.he-fire1:before{
    content:"\e9a9"
}
.he-fire2:before{
    content:"\ece1"
}
.he-fire_alarm_clear:before{
    content:"\ec23"
}
.he-firefox1:before{
    content:"\eada"
}
.he-fireplace:before{
    content:"\ed3e"
}
.he-first:before{
    content:"\ea21"
}
.he-fist:before{
    content:"\ece3"
}
.he-fist_2:before{
    content:"\ece2"
}
.he-flag1:before{
    content:"\e9cc"
}
.he-flag2:before{
    content:"\ece4"
}
.he-flash1:before{
    content:"\ec73"
}
.he-flickr1:before{
    content:"\eaa3"
}
.he-flickr2:before{
    content:"\eaa4"
}
.he-flickr3:before{
    content:"\eaa5"
}
.he-flickr4:before{
    content:"\eaa6"
}
.he-floppy-disk:before{
    content:"\e962"
}
.he-folder-download:before{
    content:"\e933"
}
.he-folder-minus:before{
    content:"\e932"
}
.he-folder-open1:before{
    content:"\e930"
}
.he-folder-plus:before{
    content:"\e931"
}
.he-folder-upload:before{
    content:"\e934"
}
.he-folder1:before{
    content:"\e92f"
}
.he-forward1:before{
    content:"\e969"
}
.he-forward3:before{
    content:"\ea20"
}
.he-gaming_controler:before{
    content:"\eb2c"
}
.he-gaming_controller_2:before{
    content:"\eb2d"
}
.he-gaming_controller_3:before{
    content:"\eb2e"
}
.he-garage_closed:before{
    content:"\ec24"
}
.he-garage_open:before{
    content:"\ec2e"
}
.he-gas_warning:before{
    content:"\ec74"
}
.he-gauge:before{
    content:"\ece6"
}
.he-gauge_2:before{
    content:"\ece5"
}
.he-gift1:before{
    content:"\e99f"
}
.he-git1:before{
    content:"\eae7"
}
.he-github1:before{
    content:"\eab0"
}
.he-glass1:before{
    content:"\e9a0"
}
.he-glass2:before{
    content:"\e9a1"
}
.he-gmail:before{
    content:"\eb30"
}
.he-google-drive:before{
    content:"\ea8f"
}
.he-google1:before{
    content:"\ea88"
}
.he-google2:before{
    content:"\ea89"
}
.he-google3:before{
    content:"\ea8a"
}
.he-google_play:before{
    content:"\eb3b"
}
.he-grid:before{
    content:"\ed2e"
}
.he-hammer:before{
    content:"\e996"
}
.he-hand_3:before{
    content:"\ece7"
}
.he-hand_wave:before{
    content:"\ece8"
}
.he-hanging_lights:before{
    content:"\eb43"
}
.he-hanging_roof_lamp:before{
    content:"\eb44"
}
.he-hangouts:before{
    content:"\ea8e"
}
.he-headphones1:before{
    content:"\e910"
}
.he-heart1:before{
    content:"\e9da"
}
.he-help1:before{
    content:"\eaef"
}
.he-history1:before{
    content:"\e94d"
}
.he-home1:before{
    content:"\e900"
}
.he-home2:before{
    content:"\e901"
}
.he-home3:before{
    content:"\e902"
}
.he-hour-glass:before{
    content:"\e979"
}
.he-house_1:before{
    content:"\ed3f"
}
.he-house_2:before{
    content:"\ed40"
}
.he-house_3:before{
    content:"\ed41"
}
.he-house_4:before{
    content:"\ed42"
}
.he-house_5:before{
    content:"\ed43"
}
.he-humidity:before{
    content:"\ecf4"
}
.he-humidity_filled:before{
    content:"\ecf3"
}
.he-image1:before{
    content:"\e90d"
}
.he-images:before{
    content:"\e90e"
}
.he-infinite:before{
    content:"\ea2f"
}
.he-info1:before{
    content:"\ea0c"
}
.he-insert-template:before{
    content:"\ea72"
}
.he-instagram1:before{
    content:"\ea92"
}
.he-integrated_circuit:before{
    content:"\ecf5"
}
.he-key1:before{
    content:"\e98d"
}
.he-keyboard:before{
    content:"\e955"
}
.he-keypad_1:before{
    content:"\eb45"
}
.he-keypad_2:before{
    content:"\eb46"
}
.he-kitchen:before{
    content:"\ed44"
}
.he-lab:before{
    content:"\e9aa"
}
.he-lamp_1:before{
    content:"\ed4d"
}
.he-lamp_hanging:before{
    content:"\ed4e"
}
.he-laptop1:before{
    content:"\e957"
}
.he-last:before{
    content:"\ea22"
}
.he-laundry:before{
    content:"\ec75"
}
.he-leaf1:before{
    content:"\e9a4"
}
.he-less_plus_signs:before{
    content:"\ecf6"
}
.he-lifebuoy:before{
    content:"\e941"
}
.he-lightbulb:before{
    content:"\eca0"
}
.he-link1:before{
    content:"\e9cb"
}
.he-link2:before{
    content:"\ecf8"
}
.he-link_broken:before{
    content:"\ecf7"
}
.he-linkedin1:before{
    content:"\eac9"
}
.he-linkedin2:before{
    content:"\eaca"
}
.he-list-numbered:before{
    content:"\e9b9"
}
.he-list1:before{
    content:"\e9ba"
}
.he-list2:before{
    content:"\e9bb"
}
.he-list3:before{
    content:"\ed2f"
}
.he-location:before{
    content:"\e947"
}
.he-location2:before{
    content:"\e948"
}
.he-lock1:before{
    content:"\e98f"
}
.he-logo-mark:before{
    content:"\e908"
}
.he-logo-vertical-white:before{
    content:"\e907";
    color:#fff
}
.he-loop:before{
    content:"\ea2d"
}
.he-loop2:before{
    content:"\ea2e"
}
.he-magic-wand:before{
    content:"\e997"
}
.he-magnet1:before{
    content:"\e9ab"
}
.he-man:before{
    content:"\e9dc"
}
.he-man-woman:before{
    content:"\e9de"
}
.he-map1:before{
    content:"\e94b"
}
.he-map2:before{
    content:"\e94c"
}
.he-menu:before{
    content:"\e9bd"
}
.he-menu2:before{
    content:"\e9be"
}
.he-menu3:before{
    content:"\e9bf"
}
.he-menu4:before{
    content:"\e9c0"
}
.he-meter:before{
    content:"\e9a6"
}
.he-meter1:before{
    content:"\ecf9"
}
.he-meter2:before{
    content:"\e9a7"
}
.he-mic:before{
    content:"\e91e"
}
.he-microsoft:before{
    content:"\eb51"
}
.he-microwave:before{
    content:"\ecc5"
}
.he-minus1:before{
    content:"\ea0b"
}
.he-mobile1:before{
    content:"\e958"
}
.he-mobile2:before{
    content:"\e959"
}
.he-mode_away:before{
    content:"\ec39"
}
.he-mode_cleaning:before{
    content:"\ec3a"
}
.he-mode_day:before{
    content:"\ec3b"
}
.he-mode_default:before{
    content:"\ec3c"
}
.he-mode_evening:before{
    content:"\ec3d"
}
.he-mode_night:before{
    content:"\ec3e"
}
.he-mode_vacation:before{
    content:"\ec3f"
}
.he-monitor:before{
    content:"\eb55"
}
.he-motion-sensor:before{
    content:"\ed64"
}
.he-motion_detector_1:before{
    content:"\ec76"
}
.he-motion_detector_2:before{
    content:"\ec82"
}
.he-motion_detector_3:before{
    content:"\ecfb"
}
.he-motion_detector_3_filled:before{
    content:"\ecfa"
}
.he-motion_detector_4:before{
    content:"\ecfc"
}
.he-mug:before{
    content:"\e9a2"
}
.he-music1:before{
    content:"\e911"
}
.he-music_player:before{
    content:"\eb56"
}
.he-mute:before{
    content:"\ecfd"
}
.he-netflix:before{
    content:"\eb57"
}
.he-new-tab:before{
    content:"\ea7e"
}
.he-newspaper:before{
    content:"\e904"
}
.he-next2:before{
    content:"\ea24"
}
.he-next_track:before{
    content:"\ecfe"
}
.he-night_1:before{
    content:"\ec83"
}
.he-night_2:before{
    content:"\ec84"
}
.he-not_present:before{
    content:"\eb8f"
}
.he-notification:before{
    content:"\ea08"
}
.he-oculus_rift:before{
    content:"\eb5f"
}
.he-office:before{
    content:"\e903"
}
.he-onedrive:before{
    content:"\eaaf"
}
.he-opt:before{
    content:"\ea51"
}
.he-outlet:before{
    content:"\ed30"
}
.he-outlet_3:before{
    content:"\ec85"
}
.he-outlet_off:before{
    content:"\e97c"
}
.he-padlock_locked:before{
    content:"\ec86"
}
.he-padlock_unlocked:before{
    content:"\ec87"
}
.he-paint-format:before{
    content:"\e90c"
}
.he-pantone_1:before{
    content:"\ecff"
}
.he-paste1:before{
    content:"\e92d"
}
.he-pause-outlined-big-symbol:before{
    content:"\ecbd"
}
.he-pause2:before{
    content:"\ea1d"
}
.he-pause_circle:before{
    content:"\ed00"
}
.he-pencil1:before{
    content:"\e905"
}
.he-phone-hang-up:before{
    content:"\e943"
}
.he-phone1:before{
    content:"\e942"
}
.he-pie-chart1:before{
    content:"\e99a"
}
.he-pinterest3:before{
    content:"\eb60"
}
.he-placeholder:before{
    content:"\ed32"
}
.he-placeholder_1:before{
    content:"\ec88"
}
.he-play1:before{
    content:"\e912"
}
.he-play3:before{
    content:"\ea1c"
}
.he-play_button:before{
    content:"\ed01"
}
.he-playstation:before{
    content:"\eb62"
}
.he-playstation_logo:before{
    content:"\eb61"
}
.he-plug1:before{
    content:"\ecb9"
}
.he-plug_1:before{
    content:"\ec89"
}
.he-plug_2:before{
    content:"\ed4f"
}
.he-plug_3:before{
    content:"\ed50"
}
.he-plug_4:before{
    content:"\ec8a"
}
.he-plug_5:before{
    content:"\ed02"
}
.he-plug_6:before{
    content:"\ed03"
}
.he-plus1:before{
    content:"\ea0a"
}
.he-podcast1:before{
    content:"\e91c"
}
.he-portrait:before{
    content:"\ed68"
}
.he-power:before{
    content:"\e9b5"
}
.he-power-cord:before{
    content:"\e9b7"
}
.he-power_off:before{
    content:"\ec40"
}
.he-power_on:before{
    content:"\ec41"
}
.he-present:before{
    content:"\eb90"
}
.he-previous2:before{
    content:"\ea23"
}
.he-price-tag:before{
    content:"\e935"
}
.he-price-tags:before{
    content:"\e936"
}
.he-printer:before{
    content:"\e954"
}
.he-profile:before{
    content:"\e923"
}
.he-property:before{
    content:"\ecb1"
}
.he-psp:before{
    content:"\eb63"
}
.he-pushpin:before{
    content:"\e946"
}
.he-qrcode1:before{
    content:"\e938"
}
.he-question1:before{
    content:"\ea09"
}
.he-question2:before{
    content:"\ecbf"
}
.he-question_1:before{
    content:"\eaf0"
}
.he-question_2:before{
    content:"\eaf1"
}
.he-quotes-left:before{
    content:"\e977"
}
.he-quotes-right:before{
    content:"\e978"
}
.he-radio-checked:before{
    content:"\ea54"
}
.he-radio-checked2:before{
    content:"\ea55"
}
.he-radio-unchecked:before{
    content:"\ea56"
}
.he-reddit1:before{
    content:"\eac6"
}
.he-redo:before{
    content:"\e966"
}
.he-redo2:before{
    content:"\e968"
}
.he-relay_off:before{
    content:"\ec4a"
}
.he-relay_on:before{
    content:"\ec4b"
}
.he-repair1:before{
    content:"\ec96"
}
.he-reply1:before{
    content:"\e96a"
}
.he-resize:before{
    content:"\ec4f"
}
.he-road1:before{
    content:"\e9b1"
}
.he-rocket1:before{
    content:"\e9a5"
}
.he-router_1:before{
    content:"\ed04"
}
.he-router_2:before{
    content:"\ed05"
}
.he-router_3:before{
    content:"\ed06"
}
.he-router_4:before{
    content:"\ed07"
}
.he-rss1:before{
    content:"\ea9b"
}
.he-rss2:before{
    content:"\ea9c"
}
.he-running:before{
    content:"\ed08"
}
.he-safari1:before{
    content:"\eadd"
}
.he-samsung:before{
    content:"\ed09"
}
.he-scissors1:before{
    content:"\ea5a"
}
.he-search1:before{
    content:"\e986"
}
.he-security_system:before{
    content:"\ed51"
}
.he-sensor:before{
    content:"\ed66"
}
.he-sensor_1:before{
    content:"\ed65"
}
.he-sensor_2:before{
    content:"\ed0a"
}
.he-sensor_3:before{
    content:"\ed0b"
}
.he-sensor_4:before{
    content:"\ed63"
}
.he-sensor_5:before{
    content:"\ed0c"
}
.he-settings1:before{
    content:"\ec4d"
}
.he-setup:before{
    content:"\ec4c"
}
.he-shades_closed:before{
    content:"\eba1"
}
.he-shades_open:before{
    content:"\ebaa"
}
.he-shades_partially_open:before{
    content:"\ebbb"
}
.he-share1:before{
    content:"\ea7d"
}
.he-share2:before{
    content:"\ea82"
}
.he-shield1:before{
    content:"\e9b4"
}
.he-shift:before{
    content:"\ea4f"
}
.he-shower1:before{
    content:"\ed52"
}
.he-shrink:before{
    content:"\e98a"
}
.he-shrink2:before{
    content:"\e98c"
}
.he-shuffle:before{
    content:"\ea30"
}
.he-sink:before{
    content:"\ed54"
}
.he-sink_2:before{
    content:"\ed53"
}
.he-siren:before{
    content:"\ed17"
}
.he-siren_and_alarm:before{
    content:"\ed0d"
}
.he-skype1:before{
    content:"\eac5"
}
.he-smoke_detector:before{
    content:"\ed19"
}
.he-smoke_detector_2:before{
    content:"\ed18"
}
.he-snowflake:before{
    content:"\ed1a"
}
.he-sofa:before{
    content:"\ed69"
}
.he-sound_on:before{
    content:"\ed1c"
}
.he-sound_on_loud:before{
    content:"\ed1b"
}
.he-soundcloud1:before{
    content:"\eac3"
}
.he-soundcloud2:before{
    content:"\eac4"
}
.he-speaker:before{
    content:"\ed1e"
}
.he-speaker_1:before{
    content:"\ed55"
}
.he-speaker_2:before{
    content:"\ed56"
}
.he-speaker_3:before{
    content:"\eb69"
}
.he-speaker_off:before{
    content:"\ed1d"
}
.he-sphere:before{
    content:"\e9c9"
}
.he-spinner11:before{
    content:"\e984"
}
.he-spoon-knife:before{
    content:"\e9a3"
}
.he-spotify1:before{
    content:"\ea94"
}
.he-spotify2:before{
    content:"\eb6a"
}
.he-square-measument:before{
    content:"\ec50"
}
.he-stack:before{
    content:"\e92e"
}
.he-stackoverflow:before{
    content:"\ead0"
}
.he-stairs:before{
    content:"\ed6b"
}
.he-star-empty:before{
    content:"\e9d7"
}
.he-star-full:before{
    content:"\e9d9"
}
.he-star-half1:before{
    content:"\e9d8"
}
.he-stats-bars:before{
    content:"\e99c"
}
.he-stats-bars2:before{
    content:"\e99d"
}
.he-stats-dots:before{
    content:"\e99b"
}
.he-steam1:before{
    content:"\eaac"
}
.he-steam2:before{
    content:"\eaad"
}
.he-stop2:before{
    content:"\ea1e"
}
.he-stop3:before{
    content:"\ed21"
}
.he-stop_2:before{
    content:"\ed20"
}
.he-stop_2_filled:before{
    content:"\ed1f"
}
.he-stopwatch:before{
    content:"\e952"
}
.he-stove:before{
    content:"\ed57"
}
.he-strikethrough2:before{
    content:"\ec9b"
}
.he-sun:before{
    content:"\e9d4"
}
.he-sun1:before{
    content:"\ec52"
}
.he-sunrise:before{
    content:"\ecc4"
}
.he-sunrise_2:before{
    content:"\ec9c"
}
.he-sunrise_3:before{
    content:"\ec9d"
}
.he-suspension:before{
    content:"\ed67"
}
.he-svg:before{
    content:"\eae9"
}
.he-switch:before{
    content:"\e9b6"
}
.he-switch_2:before{
    content:"\ed25"
}
.he-switch_2_flipped:before{
    content:"\ed22"
}
.he-switch_2_off:before{
    content:"\ec9e"
}
.he-switch_2_off_filled:before{
    content:"\ed23"
}
.he-switch_2_on:before{
    content:"\ec9f"
}
.he-switch_2_on_filled:before{
    content:"\ed24"
}
.he-switch_8:before{
    content:"\ed27"
}
.he-switch_8_closed:before{
    content:"\ed26"
}
.he-switch_off:before{
    content:"\eb98"
}
.he-switch_on:before{
    content:"\ed28"
}
.he-tab:before{
    content:"\ea45"
}
.he-table1:before{
    content:"\ea70"
}
.he-table2:before{
    content:"\ea71"
}
.he-table3:before{
    content:"\ed58"
}
.he-tablet1:before{
    content:"\e95a"
}
.he-tap:before{
    content:"\ed29"
}
.he-target:before{
    content:"\e9b3"
}
.he-telegram1:before{
    content:"\ea95"
}
.he-television_1:before{
    content:"\ed59"
}
.he-television_2:before{
    content:"\ed5a"
}
.he-terminal1:before{
    content:"\ea81"
}
.he-thermometer1:before{
    content:"\ecb5"
}
.he-thermometer_2:before{
    content:"\ed5b"
}
.he-thermometer_3:before{
    content:"\ed5c"
}
.he-thermometer_4:before{
    content:"\ed2a"
}
.he-thermometer_5:before{
    content:"\ed2b"
}
.he-thermostat_6:before{
    content:"\eb6b"
}
.he-thumb-up:before{
    content:"\ecae"
}
.he-ticket1:before{
    content:"\e939"
}
.he-toilet:before{
    content:"\ed5d"
}
.he-tree1:before{
    content:"\e9bc"
}
.he-trello1:before{
    content:"\eab3"
}
.he-trophy1:before{
    content:"\e99e"
}
.he-tumblr1:before{
    content:"\eab9"
}
.he-tumblr2:before{
    content:"\eaba"
}
.he-tux:before{
    content:"\eabd"
}
.he-tv1:before{
    content:"\e95b"
}
.he-twitch1:before{
    content:"\ea9f"
}
.he-twitter1:before{
    content:"\ea96"
}
.he-twitter2:before{
    content:"\eb76"
}
.he-undo1:before{
    content:"\e965"
}
.he-undo2:before{
    content:"\e967"
}
.he-ungroup:before{
    content:"\ea59"
}
.he-unlink1:before{
    content:"\ecb3"
}
.he-unlocked:before{
    content:"\e990"
}
.he-upload1:before{
    content:"\e961"
}
.he-upload2:before{
    content:"\e9c6"
}
.he-upload3:before{
    content:"\e9c8"
}
.he-user-check:before{
    content:"\e975"
}
.he-user-minus:before{
    content:"\e974"
}
.he-user-plus1:before{
    content:"\e973"
}
.he-user-tie:before{
    content:"\e976"
}
.he-user1:before{
    content:"\e971"
}
.he-users1:before{
    content:"\e972"
}
.he-valve:before{
    content:"\eb7a"
}
.he-valve_2:before{
    content:"\eb77"
}
.he-valve_3:before{
    content:"\eb78"
}
.he-valve_4:before{
    content:"\eb79"
}
.he-ventilator:before{
    content:"\eb7b"
}
.he-video-camera1:before{
    content:"\e914"
}
.he-video-player:before{
    content:"\ecc1"
}
.he-vimeo1:before{
    content:"\eaa0"
}
.he-vimeo2:before{
    content:"\eaa1"
}
.he-volume-decrease:before{
    content:"\ea2c"
}
.he-volume-high:before{
    content:"\ea26"
}
.he-volume-increase:before{
    content:"\ea2b"
}
.he-volume-low:before{
    content:"\ea28"
}
.he-volume-medium:before{
    content:"\ea27"
}
.he-volume-mute:before{
    content:"\ea29"
}
.he-volume-mute2:before{
    content:"\ea2a"
}
.he-wardrobe:before{
    content:"\ed61"
}
.he-wardrobe_2:before{
    content:"\ed5e"
}
.he-warning1:before{
    content:"\ea07"
}
.he-washing_machine:before{
    content:"\eb80"
}
.he-washing_machine_2:before{
    content:"\eb7d"
}
.he-washing_machine_3:before{
    content:"\eb7e"
}
.he-washing_machine_4:before{
    content:"\eb7f"
}
.he-water:before{
    content:"\eb82"
}
.he-water_2:before{
    content:"\eb81"
}
.he-water_dry:before{
    content:"\eb99"
}
.he-water_wet:before{
    content:"\eb9e";
    color:#6b6b6b
}
.he-web-design:before{
    content:"\ecc0"
}
.he-whatsapp1:before{
    content:"\ea93"
}
.he-wifi1:before{
    content:"\ed2c"
}
.he-wikipedia:before{
    content:"\eac8"
}
.he-window:before{
    content:"\ecb4"
}
.he-window_1:before{
    content:"\ecad"
}
.he-window_2:before{
    content:"\ecac"
}
.he-window_3:before{
    content:"\ed62"
}
.he-windows1:before{
    content:"\eac1"
}
.he-windows8:before{
    content:"\eac2"
}
.he-woman:before{
    content:"\e9dd"
}
.he-wordpress1:before{
    content:"\eab4"
}
.he-wrench1:before{
    content:"\e991"
}
.he-xbox:before{
    content:"\eb88"
}
.he-youtube1:before{
    content:"\ea9d"
}
.he-youtube3:before{
    content:"\eb89";
    color:#777
}
.he-zigbee:before{
    content:"\ea83"
}
.he-zoom-in:before{
    content:"\e987"
}
.he-zoom-out:before{
    content:"\e988"
}
.he-zwave:before{
    content:"\eb8b"
}
2 Likes

Another option: can also use FontAwesome (the free version of library is 1500+ icons):
https://fontawesome.com/icons?d=gallery&m=free

So for an example, I want to put a Rebel Alliance icon next to my Roomba title for whatever reason

This icon:
https://fontawesome.com/icons/rebel?style=brands

This is how you use it:
https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

Here is an exact example:

in the Dashboard > Settings > Advanced > CSS

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"; 

#tile-3 .tile-title::after { font-family: 'Font Awesome 5 Brands'; font-weight: 400; content: '\f1d0'; }

Result

53

5 Likes

Thank you @morningz!

As long as you don't mind non-local fonts, this would then also work:

Eg. for a Fighter Jet (why not?) instead of a running guy when there is motion:

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css";

.he-running:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900;
    content: "\f0fb";
}

Or, for using the Rebellion Alliance icon:

.he-running:before {
    font-family: 'Font Awesome 5 Brands' !important;
    font-weight: 400;
    content: "\f1d0";
}

The font-weight and correct font family are important.

With all of these icons we can style away however much we want :stuck_out_tongue:

Similar techniques could be used to put an image in the content (both remote and base64 encoded are possible), but this I'll leave to someone else to write detailed instructions about, at least for now :stuck_out_tongue:

You can use this site to encode in base64, and then something like this:

.he-running:before {
    content: url('data:image/png;base64,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');
}

And if you want to control the size and use SVG (SVG doesn't really need base64 and will be smaller without it, but why complicate things):

.he-running:before {
    background-size: 32px 32px;
    width: 28px; 
    height: 32px;
display: block;
content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGc+PGc+PHBhdGggZD0ibTM0MS42MTcgMzc0Ljk1aC0xNzEuMjM0cy03MS42NjYgMzkuOTY4LTcxLjY2NiAxMjkuNTVoOTAuMDk3bDY3LjE4Ni0xNy45NjEgNjcuMTg3IDE3Ljk2MWg5MC4wOTdjLS4wMDEtODkuNTgzLTcxLjY2Ny0xMjkuNTUtNzEuNjY3LTEyOS41NXoiIGZpbGw9IiM3NzcxOGMiLz48cGF0aCBkPSJtMTk0LjM4MyAzNzQuOTVoLTI0cy03MS42NjYgMzkuOTY4LTcxLjY2NiAxMjkuNTVoMjRjMC04OS41ODMgNzEuNjY2LTEyOS41NSA3MS42NjYtMTI5LjU1eiIgZmlsbD0iIzVjNTg2ZiIvPjxwYXRoIGQ9Im0yNTYgNDM3LjMxM2MtMzcuMTA2IDAtNjcuMTg3IDMwLjA4LTY3LjE4NyA2Ny4xODdoMTM0LjM3M2MuMDAxLTM3LjEwNi0zMC4wOC02Ny4xODctNjcuMTg2LTY3LjE4N3oiIGZpbGw9IiNjN2M1Y2IiLz48cGF0aCBkPSJtMjU2IDQ2OC41NzdjLTE5Ljg0IDAtMzUuOTIzIDE2LjA4My0zNS45MjMgMzUuOTIzaDcxLjg0NmMwLTE5Ljg0LTE2LjA4My0zNS45MjMtMzUuOTIzLTM1LjkyM3oiIGZpbGw9IiNiMmIwYmMiLz48Y2lyY2xlIGN4PSIyNTYiIGN5PSIyMzAuNzgyIiBmaWxsPSIjZmZkY2NlIiByPSIxNjIuMTU2Ii8+PHBhdGggZD0ibTM4MS4wNDggNTkuMjk0Yy0zMi4wMDktMzEuOTk5LTc2LjIxMi01MS43OTQtMTI1LjA0OC01MS43OTQtOTcuNjYzIDAtMTc2Ljg0MSA3OS4xNjktMTc2Ljg0MSAxNzYuODQxdjEyNi43MzNjMCAyNy41MjkgMTYuMTE5IDUyLjUwOCA0MS4yMDIgNjMuODVsNTcuOTk0IDI2LjIyNGM5LjUxMiA0LjMwMSAyMC4yOTItMi42NTUgMjAuMjkyLTEzLjA5NHYtNjYuOTc3YzAtMTkuOTE2LTEwLjYyMi0zOC4zMi0yNy44NjYtNDguMjg0bC0yOS4zNTktMTYuOTYzdi0xMTguOTE1bDExNC41NzggNjguMDU2IDExNC41NzktNjguMDU2djExOC45MTZsLTI5LjM1OSAxNi45NjNjLTE3LjI0NSA5Ljk2NC0yNy44NjYgMjguMzY4LTI3Ljg2NiA0OC4yODR2NjYuOTc3YzAgMTAuNDQgMTAuNzggMTcuMzk2IDIwLjI5MiAxMy4wOTRsNTcuOTk0LTI2LjIyNGMyNS4wODQtMTEuMzQzIDQxLjIwMi0zNi4zMjEgNDEuMjAyLTYzLjg1di0xMjYuNzM0Yy0uMDAxLTQ4LjgzNi0xOS43OTUtOTMuMDQ5LTUxLjc5NC0xMjUuMDQ3eiIgZmlsbD0iI2IyYjBiYyIvPjxwYXRoIGQ9Im0xMDkuMTU5IDM0MS4wNzR2LTE1Ni43MzNjMC05Mi42MTkgNzEuMi0xNjguNTg3IDE2MS44NDItMTc2LjIwMi00Ljk0Ni0uNDE2LTkuOTQ3LS42MzktMTUtLjYzOS05Ny42NjMgMC0xNzYuODQxIDc5LjE2OS0xNzYuODQxIDE3Ni44NDF2MTI2LjczM2MwIDI2LjI4MSAxNC42OTcgNTAuMjI4IDM3Ljg1NCA2Mi4yMTUtNS4wNjEtOS43NjctNy44NTUtMjAuNzY4LTcuODU1LTMyLjIxNXoiIGZpbGw9IiNhMTlkYWUiLz48Zz48cGF0aCBkPSJtMjU2IDIyNS41NzRjLTQuODA0IDAtOS42MDktMS4yNzYtMTMuODg2LTMuODI3bC0xNTEuODkzLTkwLjU5MmMtMjAuMTIyLTEyLjAwMi0yNi43MDUtMzguMDQzLTE0LjcwNC01OC4xNjUgMy4zMzctNS41OTUgMTAuNTc4LTcuNDI2IDE2LjE3My00LjA4OWwxNjQuMzEgOTcuOTk5IDE2NC4zMS05Ny45OTljNS41OTUtMy4zMzcgMTIuODM2LTEuNTA3IDE2LjE3MyA0LjA4OCAxMi4wMDIgMjAuMTIyIDUuNDE5IDQ2LjE2NC0xNC43MDQgNTguMTY1bC0xNTEuODkyIDkwLjU5MmMtNC4yNzcgMi41NTItOS4wODIgMy44MjgtMTMuODg3IDMuODI4eiIgZmlsbD0iIzc3NzE4YyIvPjwvZz48L2c+PGc+PHBhdGggZD0ibTE3OS4zNTcgMjE4LjQ4M2MtNC4xNDIgMC03LjUgMy4zNTgtNy41IDcuNXYxNi42OTljMCA0LjE0MiAzLjM1OCA3LjUgNy41IDcuNXM3LjUtMy4zNTggNy41LTcuNXYtMTYuNjk5YzAtNC4xNDItMy4zNTgtNy41LTcuNS03LjV6Ii8+PHBhdGggZD0ibTMzMi42NDMgMjUwLjE4MmM0LjE0MiAwIDcuNS0zLjM1OCA3LjUtNy41di0xNi42OTljMC00LjE0Mi0zLjM1OC03LjUtNy41LTcuNXMtNy41IDMuMzU4LTcuNSA3LjV2MTYuNjk5Yy0uMDAxIDQuMTQyIDMuMzU3IDcuNSA3LjUgNy41eiIvPjxwYXRoIGQ9Im0yNDEuNDQ3IDI1OS45OWMtMi43MjItMy4xMjMtNy40Ni0zLjQ0OC0xMC41ODItLjcyNi0zLjEyMyAyLjcyMS0zLjQ0OCA3LjQ1OS0uNzI2IDEwLjU4MiAxMy42ODcgMTUuNzA0IDM4LjA0OSAxNS42ODcgNTEuNzIxIDAgMi43MjItMy4xMjMgMi4zOTctNy44NjEtLjcyNi0xMC41ODItMy4xMjMtMi43MjItNy44NjEtMi4zOTctMTAuNTgyLjcyNi03LjcwOCA4Ljg0NC0yMS40MDQgOC44MzUtMjkuMTA1IDB6Ii8+PHBhdGggZD0ibTQxNi40NzcgNjIuNDMzLTE0Ljg0NyA4Ljg1NWMtNzQuMDM4LTk1LjI4My0yMTcuNDctOTQuODIxLTI5MS4yNDguMDA4bC0xNC44Ni04Ljg2M2MtOS4xNTktNS40NjMtMjAuOTk0LTIuNDczLTI2LjQ1OCA2LjY4OC0xMi42OTQgMjEuMjg0LTcuNjQ5IDQ3LjgwNCAxMC4wNDcgNjMuMTg2LTQuOTUgMTYuODUtNy40NjQgMzQuMzItNy40NjQgNTIuMDE0djEyNi43NDFjMCAzMC40MTEgMTcuOTA1IDU4LjE1OCA0NS42MTUgNzAuNjg4bDIwLjg1IDkuNDI4Yy0yMC40NDcgMjAuNjAyLTQ2LjkwNSA1Ny45NjUtNDYuOTA1IDExMy4zMjIgMCA0LjE0MiAzLjM1OCA3LjUgNy41IDcuNWgzMTQuNTg2YzQuMTQyIDAgNy41LTMuMzU4IDcuNS03LjUgMC0xNS41NDQtMi4xMTEtMzAuNzIyLTYuMjc0LTQ1LjExMS0xLjE1MS0zLjk3OS01LjMxMS02LjI3LTkuMjktNS4xMi0zLjk3OSAxLjE1MS02LjI3MiA1LjMxLTUuMTIgOS4yOSAzLjEwMSAxMC43MTcgNC45NDUgMjEuOTM1IDUuNTAyIDMzLjQ0MWgtNDIuMzA0di0zOS4zNjFjMC00LjE0Mi0zLjM1OC03LjUtNy41LTcuNXMtNy41IDMuMzU4LTcuNSA3LjV2MzkuMzYxaC0xNy45OTNjLTMuNzc0LTM3LjY3Ni0zNS42NjEtNjcuMTkxLTc0LjMxNC02Ny4xOTFzLTcwLjU0IDI5LjUxNS03NC4zMTQgNjcuMTkxaC0xNy45OTN2LTM5LjM2MWMwLTQuMTQyLTMuMzU4LTcuNS03LjUtNy41cy03LjUgMy4zNTgtNy41IDcuNXYzOS4zNjFoLTQyLjMwM2MyLjQxMS00OS42ODQgMjguNDE2LTgyLjM1IDQ2LjQxMS05OS4xNzhsMjIuNDU5IDEwLjE1NmMxMi42MzggNS43MTMgMjcuMzk1LTEuNjY0IDMwLjM2NC0xNS4xNjIgMzIuNTgyIDEwLjEyMyA2Ny45NzcgMTAuMTgzIDEwMC43NTMgMCAyLjk1NSAxMy40MzQgMTcuNjgyIDIwLjg5NyAzMC4zNjQgMTUuMTYybDIyLjQ2LTEwLjE1NmM5LjI4NiA4LjY3OCAyMS4wNzcgMjEuODkxIDMwLjM3NSAzOS41NzYgMS45MjggMy42NjcgNi40NjIgNS4wNzcgMTAuMTMgMy4xNDkgMy42NjYtMS45MjggNS4wNzYtNi40NjMgMy4xNDktMTAuMTI5LTguODA1LTE2Ljc0OS0xOS42MTktMjkuODMyLTI4Ljk2NS0zOS4yMzdsMjAuODQ5LTkuNDI4YzI3LjcxLTEyLjUzIDQ1LjYxNS00MC4yNzYgNDUuNjE1LTcwLjY4OHYtMTI2Ljc0M2MwLTE3LjY5NC0yLjUxNS0zNS4xNjQtNy40NjQtNTIuMDE0IDE3LjY5LTE1LjM3NyAyMi43NDYtNDEuODk0IDEwLjA0Ny02My4xODYtNS40NTMtOS4xMzktMTcuMzIxLTEyLjEzOS0yNi40Ni02LjY4OXptLTE4Ny44OTggNDM0LjU2NmMzLjI5OS0xMi4wNDYgMTQuMzQzLTIwLjkyNCAyNy40MjEtMjAuOTI0czI0LjEyMiA4Ljg3OCAyNy40MjEgMjAuOTI0em0yNy40MjEtNTIuMTg5YzMwLjM3NCAwIDU1LjUyMiAyMi44MDMgNTkuMjIxIDUyLjE5aC0xNi40NThjLTMuNTY1LTIwLjM4MS0yMS4zNzgtMzUuOTI1LTQyLjc2NC0zNS45MjVzLTM5LjE5OCAxNS41NDQtNDIuNzY0IDM1LjkyNWgtMTYuNDU4YzMuNzAxLTI5LjM4OCAyOC44NDktNTIuMTkgNTkuMjIzLTUyLjE5em0tMTY5LjM1Mi0xMzMuNzQ3di0xMjYuNzQxYzAtMTQuNjc2IDEuODc2LTI5LjE4NCA1LjU4NC00My4yNTFsNDEuNjgyIDI0Ljg2djg5Ljg4NWMwIDIuNjc5IDEuNDI5IDUuMTU0IDMuNzQ4IDYuNDk1bDI5LjM2MSAxNi45NjRjMTQuODc3IDguNTk2IDI0LjEyIDI0LjYxIDI0LjEyIDQxLjc5M3Y2Ni45OGMwIDQuOTkyLTUuMTU2IDguMzE4LTkuNzAyIDYuMjYxbC01Ny45OTctMjYuMjI2Yy0yMi4zNTMtMTAuMTA4LTM2Ljc5Ni0zMi40ODktMzYuNzk2LTU3LjAyem0xODcuMDgyLTgyLjg5MSA4OS4zNTUtNTMuMjk0djc2LjYwOWwtMjUuNjEyIDE0Ljc5OGMtMTkuNTAyIDExLjI2Ny0zMS42MTcgMzIuMjU4LTMxLjYxNyA1NC43ODJ2NTYuMTMyYy0zMS4zNDUgMTAuNjczLTY2LjU4IDExLjI4Mi05OS43MTMgMHYtNTYuMTMyYzAtMjIuNTIzLTEyLjExNC00My41MTQtMzEuNjE2LTU0Ljc4MmwtMjUuNjEyLTE0Ljc5OHYtNzYuNjA5bDg5LjM1NiA1My4yOTRjMTAuOTU3IDYuNTM1IDI0LjU3NyA2LjQ5IDM1LjQ1OSAwem0xNTEuNjIxIDgyLjg5MWMwIDI0LjUzMS0xNC40NDMgNDYuOTEyLTM2Ljc5NSA1Ny4wMTlsLTU3Ljk5NyAyNi4yMjZjLTQuNTQ4IDIuMDU4LTkuNzAyLTEuMjcxLTkuNzAyLTYuMjYxIDAtMjIuNDQgMC00NC43NTkgMC02Ni45OCAwLTE3LjE4MyA5LjI0Mi0zMy4xOTcgMjQuMTItNDEuNzkzbDI5LjM2LTE2Ljk2NGMyLjMxOS0xLjM0IDMuNzQ4LTMuODE2IDMuNzQ4LTYuNDk1di04OS44ODRjMTQuOTQ4LTguOTE1IDI2LjQwNC0xNS43NDggNDEuNjgyLTI0Ljg2IDMuNzA4IDE0LjA2NyA1LjU4MyAyOC41NzUgNS41ODMgNDMuMjUxdjEyNi43NDF6bS03LjQwNC0xODYuMzczYy0xNy45MjUgMTAuNjkxLTEzOS40NDYgODMuMTctMTUxLjkwMSA5MC41OTgtNi4xODMgMy42ODctMTMuOTAxIDMuNjkyLTIwLjA5MiAwLTEuODU0LTEuMTA1LTE1Mi4xOTktOTAuNzIyLTE1My44ODktOTEuODg5LTE1Ljc5MS0xMS4xMjYtMTkuMTU4LTMxLjQzNy0xMC4xMTgtNDYuNTk0IDEuMjE1LTIuMDM3IDMuODQ5LTIuNzA2IDUuODktMS40ODlsNDguNyAyOS4wNDZjMy44MjggMi4yODIgOC43NzMuNzQgMTAuNjQzLTMuMjc4IDEuNjA3LTMuNDQ0LjM3Ny03LjYxNi0yLjk1OS05LjYwNWwtMjAuODY0LTEyLjQ0NGM2Ny4xNTctODQuNDIzIDE5Ni42NzktODYuMzUzIDI2NS4yODYtLjAwMmwtMTMyLjY0MyA3OS4xMTMtODYuMTUtNTEuMzgxYy0zLjU4Ny0yLjEzOS04LjE5NS0uOTAyLTEwLjI4NCAyLjYtMi4xMjIgMy41NTgtLjk1OCA4LjE2MiAyLjYgMTAuMjg0IDkzLjg1MiA1NS41MjkgODkuOTEyIDU0LjczMiA5My44MzQgNTQuNzMyIDEuMzI5IDAgMi42NTgtLjM1MyAzLjg0Mi0xLjA1OSA2LjIxNS0zLjcwNyAxNDkuMzQ1LTg5LjA3NCAxNjQuMzE5LTk4LjAwNSAyLjAzNC0xLjIxMyA0LjY3Ny0uNTQ1IDUuODkxIDEuNDg5IDkuOTc2IDE2LjcyNSA0LjMwNyAzOC4wOTYtMTIuMTA1IDQ3Ljg4NHoiLz48L2c+PC9nPjwvc3ZnPg==");
}

EDIT: Make the background-size square even though your image isn't, use the larger dimension for both sides.

3 Likes

hah! what a great reference/link! I knew about that site for some work stuff and was messing around with it:

Garage door closed, my RS in the garage

52

The garage is open to let my car out to play!

50

CSS:
Github Gist

My next step when I have (scoff!) time is to see about using Groovy to make a way more configurable dashboard setup

#css_rules

2 Likes

A virtual driver to insert Javascript could be nice... Might get to that some day...

2 Likes

I know it was a few days ago, but I had reason to play with these tiles today, and thought of the following way:

div.heating div.inline-block {
 height: 18px;
 overflow: hidden;
}

EDIT: 18px is 12px (font-size) * 1.5 (line-height). There is no way in pure CSS to use the line-height value to set height, at least as far as I know.

For more customization of this type of tile, see this post:

2 Likes

Brilliant. That works perfectly - thank you so much

1 Like

Here is the reason for me fiddling with the Thermostat tile:

2020-01-29_21-27-30

div.bottom-0:after {
    visibility: visible;
    position: absolute;
    text-align: center;
    left: 0;
    right: 0;
    bottom: 0;
    white-space: pre-wrap;
}
#tile-13 div div div.heating {
    display: none;
}
#tile-13 div.self-start div {
    display: none;
}
#tile-13 div.self-start::before {
    content: 'Temperature';
    padding: .25rem;
    display: block;
}
#tile-13 div.my-1 {
    display: none !important;
}
#tile-13 div.cooling div.inline-block {
    height: 31.5px;
    overflow: hidden;
    font-size: 21px !important;
}
#tile-13 div.cooling div.inline-block small {
    font-size: 50% !important;
}
#tile-13 div.cooling div.inline-block small:before {
    font-size: 21px !important;
    content: ' ';
}
#tile-13 div.cooling i.he-circle-down, #tile-13 div.cooling i.he-circle-up {
    display: none;
}
#tile-13 div.bottom-0 {
      visibility: hidden;
      white-space: nowrap;
      overflow: unset;
}
#tile-13 div.bottom-0:after {
      content: 'Master Bed';
}

This combined with a virtual thermostat device and a little rule in RM4 and I now have a Temperature tile changing color based on temperature... Not very practical, but fun! If I would use this more, I'd extend my Temperature device driver with the correct capabilities :wink:

1 Like

Looking for some help. I can't figure out how to accomplish this or if it is even possible using CSS. I am trying to get my scene tile "on/off" buttons to look like the "on" button pictured. I can modify the text using the ".tile-primary div div" section but nothing I place in there seems to affect the shadow, button or whatever that is. I modified the element on the webpage to show what I am trying to do changing the background opacity and the border-radius. I have placed background-color and border-radius in other divs as well but none seem to work.
Scene
Page element:
"div class="shadow" style="display: inline-block; padding: 16px; background-color: rgba(0, 0, 0, 0.35); border-radius: 40px; cursor: pointer;"> On </div"

1 Like

The below should get you close, using "!important" overrides styles applied to the element directly.
For what you want in looks I suggest you override grid size so you get squares, the below is just a 3x4 Dashboard, you need to use what is suitable to you. I hope the below helps.

.wrapper.z-0 {
grid-template-columns: repeat(4, 160px) !important;
grid-template-rows: repeat(3, 160px) !important;
grid-auto-columns: 160px !important;
grid-auto-rows: 160px !important;
} 

#tile-0 {
  display: inline-block; 
padding: 16px;
 background-color: rgba(0, 0, 0, 0.35); 
border-radius: 50% !important; 
}
#tile-0 .tile-title,
#tile-0 .tile-secondary,
#tile-0 .tile-primary i {
 display: none;
}
#tile-0 .tile-primary div {
 font-size: 32px;
}
#tile-0 .tile-contents {
width: calc(100%);
height: calc(100%);
}

2020-02-07_23-09-03

1 Like

Thank you very much for the detailed response. That's so much deeper than I thought it would be. I plugged it in quickly and made the changes I thought I'd need but it didn't work for me. Having said that I really have no idea what I'm doing but this tells me what I need to look at and learn. I'll dig in when I get some more time. Thanks again.

Has anyone used the Modal command to make a tile full screen when you click on it. Haven’t been able to figure that out.

@CAZ It is a bit to think about, but it's mostly the parts about having a square grid and using "!important" which are important to get right. Hope you get it working for you!

@albertsmark Not exactly sure which Modal command you're referring to? If I understand what you mean you're talking about a modal dialog in pure CSS? This would be complicated without having a tabindex set on the div. Without that, divs don't have the :focus and :focus-within events. The only way I know of to make this work would be with Javascript since we can't control the html in any other way. It might be possible to inject a div with a tabindex for certain types of tiles (like attribute) which allow input, but even then it wouldn't be easy to get it to work and look nice, but at least it should then be possible.

Example, make an attribute contain the below and create a tile with that attribute:
<div tabindex="-1">My prefs</div>

Then use code like this (this will not be on top, centered or anything like that, it's just to show the principle):
#tile-1 {
transition:height 0s 10s;
transition:width 0s 10s;
}
#tile-1:focus-within {
display: inline !important;
width: 300px;
height: 300px;
transition:width 0s;
transition:height 0s;
overflow: unset;
}

This will kind-of do what you want, but I really don't think it can be done nicely without javascript since we don't have the tabindex tag already in the html. Hope this helps.
There is a way to inject javascript, but that is not very user-friendly...

Is there a way to hide the hide the "Icon Helper Text" on a per tile basis instead of on a global "dashboard" basis?

Each tile has a unique way to target the CSS at it, that's what "#tile-1" is in the post right above yours. Use your browser's Web Inspector (for instance, in Chrome it's Right Click on tile > Inspect Element) to find out it's unique identifier

Hopefully this is a good enough example to demonstrate

Let's say I want to get rid of the word "Present" as the icon is good enough feedback for me

25

I right click on "Present", choose "Inspect Element" (in Chrome)

There it is highlighted, it is part of the div with the id of "tile-12", and this is the main HTML container for the tile.

Using some CSS to target it:

#tile-12 .tile-primary > div {
	display: none;
}

That says:
in the container identified as 'tile-12' find the container with the class name 'tile-primary' then find the direct descendent (the '>' sign) that is a div and do not show it

As you see, adios to the icon label

Here is more on Descendant selectors that explains it well:

5 Likes

Thank you!!

Another noob question. I'm trying to "Alias", or rename Dashboard tiles (IE: I have Dashboards based on the form factor... tablet, phone, etc) but want to simplify the Dashboard tile display name (IE: "Main" in lieu of "Main-Tablet"). The Dashboard display name is in the "tile-primary" element, but I have not been able to find a way to mask it and alias it with something else.

This isn't what you are looking for?

You'd want to display: none the generated text and then use ::after to put your own custom text.

There isn't anyway to do it automatically in CSS if I am understanding your post correctly

1 Like

The above post earlier in this thread is for tile-title, isn't that what you mean? tile-primary is where things like the temperature go. The label is in tile-title.