lebernd
September 11, 2020, 6:34am
1
Hello all,
this question is so simple that I can’t find an answer searching the forum or the docs…
So: when I add a button (or similar) to lovelace - there is a preselected icon like - let’s say - palette
or as code: hass:palette
I figured out that there is something like hass:flash
too but:
Where do I find the list of built-in icons?
Thanks, Bernd
3 Likes
M1ke
September 11, 2020, 6:51am
2
4 Likes
lebernd
September 11, 2020, 7:02am
3
Thank you @M1ke !
I knew, that with the answer I could write a much better question and get many answers
Even in the docs / the additional resource at the bottom:
1 Like
tom_l
September 11, 2020, 7:03am
4
I think we’re using a later version than 5.3.45:
home-assistant:dev
← home-assistant:mdi5555
opened 05:14PM - 11 Aug 20 UTC
<!--
You are amazing! Thanks for contributing to our project!
Please, DO N… OT DELETE ANY TEXT from this template! (unless instructed).
-->
## Breaking change
<!--
If your PR contains a breaking change for existing users, it is important
to tell them what breaks, how to make it work again and why we did this.
This piece of text is published with the release notes, so it helps if you
write it towards our users, not us.
Note: Remove this section if this PR is NOT a breaking change.
-->
## Proposed change
<!--
Describe the big picture of your changes here to communicate to the
maintainers why we should accept this pull request. If it fixes a bug
or resolves a feature request, be sure to link to that issue in the
additional information section.
-->
https://dev.materialdesignicons.com/upgrade#5.4.45-to-5.5.55
## Type of change
<!--
What type of change does your PR introduce to the Home Assistant frontend?
NOTE: Please, check only 1! box!
If your PR requires multiple boxes to be checked, you'll most likely need to
split it into multiple PRs. This makes things easier and faster to code review.
-->
- [x] Dependency upgrade
- [ ] Bugfix (non-breaking change which fixes an issue)
- [ ] New feature (thank you!)
- [ ] Breaking change (fix/feature causing existing functionality to break)
- [ ] Code quality improvements to existing code or addition of tests
## Example configuration
<!--
Supplying a configuration snippet, makes it easier for a maintainer to test
your PR.
-->
```yaml
```
## Additional information
<!--
Details are important, and help maintainers processing your PR.
Please be sure to fill out additional details, if applicable.
-->
- This PR fixes or closes issue: fixes #
- This PR is related to issue:
- Link to documentation pull request:
## Checklist
<!--
Put an `x` in the boxes that apply. You can also fill these out after
creating the PR. If you're unsure about any of them, don't hesitate to ask.
We're here to help! This is simply a reminder of what we are going to look
for before merging your code.
-->
- [ ] The code change is tested and works locally.
- [ ] There is no commented out code in this PR.
- [ ] Tests have been added to verify that the new code works.
If user exposed functionality or configuration variables are added/changed:
- [ ] Documentation added/updated for [www.home-assistant.io][docs-repository]
<!--
Thank you for contributing <3
-->
[docs-repository]: https://github.com/home-assistant/home-assistant.io
So:
Either way I just use:
and check the history on the rare occasion that an icon refuses to show up. 10 times out of 10 it’s because it’s a new icon that isn’t in HA yet and only takes a release or so until it is.
There’s also this:
I have created a site https://mdi.bessarabov.com The idea is to make it simple to search for the Material Design Icon that you need.
[1]
I really like Home Assistant and Material Design Icons, but I can’t use the official site https://materialdesignicons.com — it is extremely slow. There are some other problems with that site but the main one is the speed how it works.
So, I have created the site for the icons that I want to use.
It is fast. (it is using static html file…
8 Likes
lebernd
September 11, 2020, 7:12am
5
Cool to have all the links and resources here in the thread!
If you search the docs for "icon"
you won’t find that info… Perhaps there should be a link somewhere in variables-section for icon
too?
M1ke
September 11, 2020, 7:14am
6
Thanks for the additions!
5.3.45 was implemented in 0.113 and 5.5.55 will only be as of 0.115 - I am not sure whether 5.4.55 was introduced in 0.114 (couldn’t find anything related in the release notes) - can’t check, as I couldn’t wait for all the cool things in 0.115 .
1 Like
tom_l
September 11, 2020, 7:14am
7
The release notes for each release (posted in the blog topic) usually list the MDI version if it is updated.
There’s also a place on the home assistant frontend github that shows the current version… but I cant find it.
Edit: Here it is. Search for @mdi
:
{
"description": "A frontend for Home Assistant using the Polymer framework",
"repository": {
"type": "git",
"url": "https://github.com/home-assistant/home-assistant-polymer"
},
"name": "home-assistant-frontend",
"version": "1.0.0",
"scripts": {
"build": "script/build_frontend",
"lint:eslint": "eslint '**/src/**/*.{js,ts,html}' --ignore-path .gitignore",
"format:eslint": "eslint '**/src/**/*.{js,ts,html}' --fix --ignore-path .gitignore",
"lint:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --check",
"format:prettier": "prettier '**/src/**/*.{js,ts,json,css,md}' --write",
"lint:types": "tsc",
"lint:lit": "lit-analyzer '**/src/**/*.ts' --format markdown --outFile result.md",
"lint": "npm run lint:eslint && npm run lint:prettier && npm run lint:types",
"format": "npm run format:eslint && npm run format:prettier",
"mocha": "node_modules/.bin/ts-mocha -p test-mocha/tsconfig.test.json --opts test-mocha/mocha.opts",
"test": "npm run lint && npm run mocha"
This file has been truncated. show original
dbrunt
(Daniel)
November 17, 2020, 11:21pm
8
Here’s a list of the current hass: icons I’ve put together:
Count: 190
hass:account
hass:alert
hass:alert-circle
hass:altimeter
hass:apple-safari
hass:apps
hass:arrow-bottom-left
hass:arrow-down
hass:arrow-left
hass:arrow-right
hass:arrow-top-right
hass:arrow-up
hass:autorenew
hass:battery
hass:battery-
hass:battery-alert
hass:battery-outline
hass:battery-unknown
hass:bell
hass:bell-outline
hass:bell-plus
hass:bell-ring
hass:bell-sleep
hass:bookmark
hass:brightness-
hass:brightness-5
hass:broom
hass:calendar
hass:calendar-clock
hass:cancel
hass:cast
hass:cast-connected
hass:chart-line
hass:check
hass:checkbox-marked-circle
hass:check-circle-outline
hass:chevron-down
hass:chevron-left
hass:chevron-right
hass:chevron-up
hass:clock
hass:clock-fast
hass:close
hass:cloud-upload
hass:code-tags
hass:cog
hass:comment-alert
hass:content-save
hass:crop-portrait
hass:cursor-pointer
hass:delete
hass:door-closed
hass:door-open
hass:dots-horizontal
hass:dots-vertical
hass:drawing
hass:emoticon
hass:emoticon-dead
hass:emoticon-poop
hass:exit-to-app
hass:eye
hass:eye-off
hass:fan
hass:file-document
hass:file-multiple
hass:file-word-box
hass:file-xml
hass:filter-variant
hass:fire
hass:flash
hass:flash-off
hass:flower
hass:format-list-bulleted
hass:garage
hass:garage-open
hass:gauge
hass:google-circles-communities
hass:google-pages
hass:hammer
hass:help-circle
hass:home
hass:home-assistant
hass:home-automation
hass:home-map-marker
hass:home-outline
hass:home-variant
hass:image-filter-center-focus
hass:image-filter-frames
hass:information-outline
hass:leaf
hass:lightbulb
hass:link
hass:lock
hass:lock-open
hass:login-variant
hass:mailbox
hass:map-marker
hass:menu
hass:menu-down
hass:menu-up
hass:microphone
hass:music-note
hass:music-note-off
hass:nature
hass:notification-clear-all
hass:open-in-new
hass:original-icon
hass:palette
hass:pause
hass:pencil
hass:pencil-off
hass:play
hass:playlist-play
hass:play-pause
hass:plus
hass:plus-circle
hass:poll-box
hass:power
hass:power-plug
hass:power-plug-off
hass:power-sleep
hass:radiobox-blank
hass:radio-tower
hass:ray-vertex
hass:refresh
hass:remote
hass:robot-vacuum
hass:rotate-left
hass:rotate-right
hass:run
hass:security
hass:send
hass:server-network
hass:server-network-off
hass:settings
hass:shield-check
hass:shield-home
hass:shield-lock
hass:shield-outline
hass:skip-next
hass:skip-previous
hass:sleep
hass:snowflake
hass:square
hass:square-outline
hass:stop
hass:target-variant
hass:television
hass:television-box
hass:television-off
hass:textbox
hass:text-to-speech
hass:thermometer
hass:thermostat
hass:timer
hass:timer-off
hass:timer-sand
hass:tooltip-account
hass:undo
hass:user-icon
hass:vibrate
hass:video
hass:view-dashboard
hass:volume-high
hass:volume-medium
hass:volume-minus
hass:volume-off
hass:volume-plus
hass:walk
hass:water
hass:water-off
hass:water-percent
hass:weather-cloudy
hass:weather-fog
hass:weather-hail
hass:weather-lightning
hass:weather-lightning-rainy
hass:weather-night
hass:weather-partlycloudy
hass:weather-pouring
hass:weather-rainy
hass:weather-snowy
hass:weather-snowy-rainy
hass:weather-sunny
hass:weather-windy
hass:weather-windy-variant
hass:white-balance-sunny
hass:window-closed
hass:window-open
hass:z-wave
21 Likes
aatrubilin
(Aleksandr Trubilin)
March 27, 2021, 4:57pm
9
Hy everybody!
I just create fork with some changes for ha users:
change icon names (mdi-home to mdi:home)
now you can just copy and past icon name
add serach input
remove usless info
Check out here https://aatrubilin.github.io/pictogrammers.github.io/@mdi/font/5.9.55/
2 Likes
jfc
(Jose)
April 28, 2021, 1:10pm
10
Tip
in this URL you can search icons by text: Material Design Icons
M1ke
April 30, 2021, 12:27am
11
Man, that’s hella good, love the fact you changed the annoying ‘mdi-’ to ‘mdi:’
gabrielpc
(Gabriel P)
June 10, 2021, 3:17pm
12
I’m not clear on how to use this material design icons.
Let’s say I want to use this icon: battery-50 from materialdesignicons.com
I got this when I select it:
Then I copy the mdiBattery50 and paste it on my home assistant sensor and add the colon:
mdi:battery50
It then shows as no icon:
What else needs to be done to use mdi icons?
Troon
(Troon)
June 10, 2021, 3:20pm
13
Look at the cheat sheet .
Use exactly as written except with mdi-
replaced with mdi:
, so mdi:battery-50
.
Also, if you declare or customise your sensor with device_class: battery
, it will give you a dynamically-updated icon representing the charge automatically (docs ):
3 Likes
tom_l
June 10, 2021, 5:05pm
14
You con do it from the mdi website too:
2 Likes
typxxi
(wolf)
June 12, 2021, 1:51pm
15
there is a difference between ‘B’ and ‘b’ - your ‘mdi:Battery’ is unknown.
but ‘mdi:battery’ does work !
UPDATE: I meant ‘mdi:battery-50’ does work
END OF UPDATE
Tiny point and bad luck that you did not copy but typed yourself.
But at least a lesson learned that with new stuff copy and paste is the past to start with.
Avoids headache - as long as the developer had done it right.
Cheeeers for your next battery (icon)
tom_l
June 12, 2021, 2:02pm
16
Yeah but it is not the 50% battery icon they were after.
typxxi
(wolf)
June 12, 2021, 2:12pm
17
sorry, I missed the ‘-50’
and the ‘B’ attery had caused the issue cause it really works
and it does not work with the ‘B’ as you can see here