Move all hass: icons to @mdi/js imports

[bramkragten]

The request

We no longer do anything with the hass prefixed icons since we lazy load icons. We treat them the same as normal mdi icons. This means we download a icon chunk and cache in the db, and that we fetch from the db on all hass icons.

We should import the icons we use ourselves, that means we can code split them and load only what we need for the specific page.

The alternatives

Keep it like it is now.

Additional information

from:

<ha-icon icon="hass:icon-name"></ha-icon>

to:

import { mdiIconName } from "@mdi/js";
<ha-svg-icon .path=${mdiIconName}></ha-svg-icon>

[Misiu]

@bramkragten should we use path or .path property. Both ways are used in the codebase 🤔

[bramkragten]

We should set it as a property, so .path

[Misiu]

@bramkragten ok, that's how I did it in my first PR.
I'll try to replace more in the next PR's.
I'm going to add a dot to all places where path property is used for ha-svg-icon