jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-19 10:57:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Generate Hass and Hass.io specific iconset (#1214)

Browse Source 
* Generate hass icons

* Generate Hass.io icons

* Convert hass.io to use hassio iconset

* Convert src to use hass iconset

* Give mdi-icons a chunk name

* gen-index-html aware of hass-icons

* Use ha-icon for rendering state icon
This commit is contained in:
Paulus Schoutsen 2018-05-27 17:04:18 -04:00 committed by GitHub
parent 294f0febbf
commit 66012da4de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
81 changed files with 384 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,5 @@
build
build-translations/*
hassio/build-es5/*
node_modules/*
npm-debug.log
.DS_Store

94
gulp/tasks/gen-icons.js
View File

@ -7,16 +7,30 @@ const ICON_PACKAGE_PATH = path.resolve(__dirname, '../../node_modules/@mdi/svg/'
const META_PATH = path.resolve(ICON_PACKAGE_PATH, 'meta.json');
const ICON_PATH = path.resolve(ICON_PACKAGE_PATH, 'svg');
const OUTPUT_DIR = path.resolve(__dirname, '../../build');
const OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'mdi.html');
const MDI_OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'mdi.html');
const HASS_OUTPUT_PATH = path.resolve(OUTPUT_DIR, 'hass-icons.html');
function iconPath(name) {
return path.resolve(ICON_PATH, `${name}.svg`);
}
const BUILT_IN_PANEL_ICONS = [
'settings', // Config
'home-assistant', // Hass.io
'poll-box', // History panel
'format-list-bulleted-type', // Logbook
'mailbox', // Mailbox
'account-location', // Map
'cart', // Shopping List
];
// Given an icon name, load the SVG file
function loadIcon(name) {
return fs.readFileSync(iconPath(name), 'utf-8');
const iconPath = path.resolve(ICON_PATH, `${name}.svg`);
try {
return fs.readFileSync(iconPath, 'utf-8');
} catch (err) {
return null;
}
}
// Given an SVG file, convert it to an iron-iconset-svg definition
function transformXMLtoPolymer(name, xml) {
const start = xml.indexOf('><path') + 1;
const end = xml.length - start - 6;
@ -24,19 +38,69 @@ function transformXMLtoPolymer(name, xml) {
return `<g id="${name}">${path}</g>`;
}
function generateIconset(name, iconDefs) {
return `
<ha-iconset-svg name="${name}" size="24"><svg><defs>
${iconDefs}
</defs></svg></ha-iconset-svg>
`;
// Given an iconset name and icon names, generate a polymer iconset
function generateIconset(name, iconNames) {
const iconDefs = iconNames.map(name => {
const iconDef = loadIcon(name);
if (!iconDef) {
throw new Error(`Unknown icon referenced: ${name}`);
}
return transformXMLtoPolymer(name, iconDef)
}).join('');
return `<ha-iconset-svg name="${name}" size="24"><svg><defs>${iconDefs}</defs></svg></ha-iconset-svg>`;
}
async function genIcons(es6) {
// Generate the full MDI iconset
function genMDIIcons() {
const meta = JSON.parse(fs.readFileSync(path.resolve(ICON_PACKAGE_PATH, META_PATH), 'UTF-8'));
const iconDefs = meta.map(iconInfo => transformXMLtoPolymer(iconInfo.name, loadIcon(iconInfo.name))).join('');
const iconNames = meta.map(iconInfo => iconInfo.name);
fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
fs.writeFileSync(OUTPUT_PATH, generateIconset('mdi', iconDefs));
fs.writeFileSync(MDI_OUTPUT_PATH, generateIconset('mdi', iconNames));
}
gulp.task('gen-icons', () => genIcons());
// Helper function to map recursively over files in a folder and it's subfolders
function mapFiles(startPath, filter, mapFunc) {
const files = fs.readdirSync(startPath);
for (let i = 0; i < files.length; i++) {
const filename = path.join(startPath, files[i]);
const stat = fs.lstatSync(filename);
if (stat.isDirectory()) {
mapFiles(filename, filter, mapFunc);
} else if (filename.indexOf(filter) >= 0) {
mapFunc(filename);
}
}
}
// Find all icons used by the project.
function findIcons(path, iconsetName) {
const iconRegex = new RegExp(`${iconsetName}:[\\w-]+`, 'g');
const icons = new Set();
function processFile(filename) {
const content = fs.readFileSync(filename);
let match;
// eslint-disable-next-line
while (match = iconRegex.exec(content)) {
// strip off "hass:" and add to set
icons.add(match[0].substr(iconsetName.length + 1));
}
}
mapFiles(path, '.js', processFile);
return Array.from(icons);
}
function genHassIcons() {
const iconNames = findIcons('./src', 'hass').concat(BUILT_IN_PANEL_ICONS);
fs.existsSync(OUTPUT_DIR) || fs.mkdirSync(OUTPUT_DIR);
fs.writeFileSync(HASS_OUTPUT_PATH, generateIconset('hass', iconNames));
}
gulp.task('gen-icons-mdi', () => genMDIIcons());
gulp.task('gen-icons-hass', () => genHassIcons());
gulp.task('gen-icons-hassio', () => genHassIcons());
gulp.task('gen-icons', ['gen-icons-hass', 'gen-icons-mdi'], () => {});
module.exports = {
findIcons,
generateIconset,
};

4
gulp/tasks/gen-index-html.js
View File

@ -18,8 +18,8 @@ function generateIndex(es6) {
const toReplace = [
// Needs to look like a color during CSS minifiaction
['{{ theme_color }}', '#THEME'],
['/frontend_latest/mdi.js',
`/frontend_latest/mdi-${md5(path.resolve(config.output, 'mdi.js'))}.js`],
['/frontend_latest/hass-icons.js',
`/frontend_latest/hass-icons-${md5(path.resolve(config.output, 'hass-icons.js'))}.js`],
];
if (!es6) {

2
hassio/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
build-es5/*
hassio-icons.html

1
hassio/index.html
View File

@ -30,6 +30,5 @@
}
</script>
<script src="./app.js"></script>
<script src="/frontend_latest/mdi.js"></script>
</body>
</html>

1
hassio/script/build_hassio
View File

@ -9,5 +9,6 @@ cd "$(dirname "$0")/.."
OUTPUT_DIR_ES5=build-es5
rm -rf $OUTPUT_DIR_ES5
node script/gen-icons.js
NODE_ENV=production ../node_modules/.bin/webpack -p
node script/gen-index-html.js

1
hassio/script/develop
View File

@ -9,4 +9,5 @@ OUTPUT_DIR_ES5=build-es5
rm -rf $OUTPUT_DIR_ES5
mkdir $OUTPUT_DIR_ES5
node script/gen-index-html.js
node script/gen-icons.js
../node_modules/.bin/webpack --watch --progress

13
hassio/script/gen-icons.js Executable file
View File

@ -0,0 +1,13 @@
#!/usr/bin/env node
const fs = require('fs');
const {
findIcons,
generateIconset,
} = require('../../gulp/tasks/gen-icons.js');
function genHassIcons() {
const iconNames = findIcons('./src', 'hassio');
fs.writeFileSync('./hassio-icons.html', generateIconset('hassio', iconNames));
}
genHassIcons();

2
hassio/src/addon-store/hassio-addon-repository.js
View File

@ -51,7 +51,7 @@ class HassioAddonRepository extends NavigateMixin(PolymerElement) {
}
computeIcon(addon) {
return addon.installed && addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
return addon.installed && addon.installed !== addon.version ? 'hassio:arrow-up-bold-circle' : 'hassio:puzzle';
}
computeIconTitle(addon) {

4
hassio/src/addon-store/hassio-repositories-editor.js
View File

@ -35,7 +35,7 @@ class HassioRepositoriesEditor extends PolymerElement {
<template id="list" is="dom-repeat" items="[[repoList]]" as="repo" sort="sortRepos">
<paper-card>
<div class="card-content">
<hassio-card-content title="[[repo.name]]" description="[[repo.url]]" icon="mdi:github-circle"></hassio-card-content>
<hassio-card-content title="[[repo.name]]" description="[[repo.url]]" icon="hassio:github-circle"></hassio-card-content>
</div>
<div class="card-actions">
<ha-call-api-button hass="[[hass]]" path="hassio/supervisor/options" data="[[computeRemoveRepoData(repoList, repo.url)]]" class="warning">Remove</ha-call-api-button>
@ -44,7 +44,7 @@ class HassioRepositoriesEditor extends PolymerElement {
</template>
<paper-card>
<div class="card-content add">
<iron-icon icon="mdi:github-circle"></iron-icon>
<iron-icon icon="hassio:github-circle"></iron-icon>
<paper-input label="Add new repository by URL" value="{{repoUrl}}"></paper-input>
</div>
<div class="card-actions">

6
hassio/src/addon-view/hassio-addon-info.js
View File

@ -66,7 +66,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
<template is="dom-if" if="[[computeUpdateAvailable(addon)]]">
<paper-card heading="Update available! 🎉">
<div class="card-content">
<hassio-card-content title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="mdi:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
<hassio-card-content title="[[addon.name]] [[addon.last_version]] is available" description="You are currently running version [[addon.version]]" icon="hassio:arrow-up-bold-circle" icon-class="update"></hassio-card-content>
</div>
<div class="card-actions">
<ha-call-api-button hass="[[hass]]" path="hassio/addons/[[addonSlug]]/update">Update</ha-call-api-button>
@ -84,10 +84,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
<template is="dom-if" if="[[addon.version]]">
[[addon.version]]
<template is="dom-if" if="[[isRunning]]">
<iron-icon title="Add-on is running" class="running" icon="mdi:circle"></iron-icon>
<iron-icon title="Add-on is running" class="running" icon="hassio:circle"></iron-icon>
</template>
<template is="dom-if" if="[[!isRunning]]">
<iron-icon title="Add-on is stopped" class="stopped" icon="mdi:circle"></iron-icon>
<iron-icon title="Add-on is stopped" class="stopped" icon="hassio:circle"></iron-icon>
</template>
</template>
<template is="dom-if" if="[[!addon.version]]">

2
hassio/src/addon-view/hassio-addon-view.js
View File

@ -40,7 +40,7 @@ class HassioAddonView extends PolymerElement {
<app-header fixed="" slot="header">
<app-toolbar>
<ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
<paper-icon-button icon="mdi:arrow-left" on-click="backTapped"></paper-icon-button>
<paper-icon-button icon="hassio:arrow-left" on-click="backTapped"></paper-icon-button>
<div main-title="">Hass.io: add-on details</div>
</app-toolbar>
</app-header>

2
hassio/src/components/hassio-card-content.js
View File

@ -64,7 +64,7 @@ class HassioCardContent extends PolymerElement {
datetime: String,
icon: {
type: String,
value: 'mdi:help-circle'
value: 'hass:help-circle'
},
iconTitle: String,
iconClass: String,

2
hassio/src/dashboard/hassio-addons.js
View File

@ -46,7 +46,7 @@ class HassioAddons extends NavigateMixin(PolymerElement) {
}
computeIcon(addon) {
return addon.installed !== addon.version ? 'mdi:arrow-up-bold-circle' : 'mdi:puzzle';
return addon.installed !== addon.version ? 'hassio:arrow-up-bold-circle' : 'hassio:puzzle';
}
computeIconTitle(addon) {

2
hassio/src/dashboard/hassio-hass-update.js
View File

@ -27,7 +27,7 @@ class HassioHassUpdate extends PolymerElement {
<div class="title">Update available! 🎉</div>
<paper-card>
<div class="card-content">
<hassio-card-content title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="mdi:home-assistant" icon-class="hassupdate"></hassio-card-content>
<hassio-card-content title="Home Assistant [[hassInfo.last_version]] is available" description="You are currently running version [[hassInfo.version]]" icon="hassio:home-assistant" icon-class="hassupdate"></hassio-card-content>
<template is="dom-if" if="[[error]]">
<div class="error">Error: [[error]]</div>
</template>

1
hassio/src/hassio-app.js
View File

@ -2,6 +2,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import './hassio-main.js';
import './resources/hassio-icons.js';
class HassioApp extends PolymerElement {
static get template() {

2
hassio/src/hassio-markdown-dialog.js
View File

@ -52,7 +52,7 @@ class HassioMarkdownDialog extends PolymerElement {
</style>
<paper-dialog id="dialog" with-backdrop="">
<app-toolbar>
<paper-icon-button icon="mdi:close" dialog-dismiss=""></paper-icon-button>
<paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
<div main-title="">[[title]]</div>
</app-toolbar>
<paper-dialog-scrollable>

2
hassio/src/hassio-pages-with-tabs.js
View File

@ -37,7 +37,7 @@ class HassioPagesWithTabs extends NavigateMixin(PolymerElement) {
<ha-menu-button narrow="[[narrow]]" show-menu="[[showMenu]]"></ha-menu-button>
<div main-title="">Hass.io</div>
<template is="dom-if" if="[[showRefreshButton(page)]]">
<paper-icon-button icon="mdi:refresh" on-click="refreshClicked"></paper-icon-button>
<paper-icon-button icon="hassio:refresh" on-click="refreshClicked"></paper-icon-button>
</template>
</app-toolbar>
<paper-tabs scrollable="" selected="[[page]]" attr-for-selected="page-name" on-iron-activate="handlePageSelected">

6
hassio/src/resources/hassio-icons.js Normal file
View File

@ -0,0 +1,6 @@
import iconSetContent from '../../hassio-icons.html';
const documentContainer = document.createElement('template');
documentContainer.setAttribute('style', 'display: none;');
documentContainer.innerHTML = iconSetContent;
document.head.appendChild(documentContainer.content);

6
hassio/src/snapshots/hassio-snapshot.js
View File

@ -58,7 +58,7 @@ class HassioSnapshot extends PolymerElement {
</style>
<paper-dialog id="dialog" with-backdrop="" on-iron-overlay-closed="_dialogClosed">
<app-toolbar>
<paper-icon-button icon="mdi:close" dialog-dismiss=""></paper-icon-button>
<paper-icon-button icon="hassio:close" dialog-dismiss=""></paper-icon-button>
<div main-title="">[[_computeName(snapshot)]]</div>
</app-toolbar>
<div class="details">
@ -95,9 +95,9 @@ class HassioSnapshot extends PolymerElement {
<p class="error">Error: [[error]]</p>
</template>
<div class="buttons">
<paper-icon-button icon="mdi:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
<paper-icon-button icon="hassio:delete" on-click="_deleteClicked" class="warning" title="Delete snapshot"></paper-icon-button>
<a href="[[_computeDownloadUrl(snapshotSlug)]]" download="[[_computeDownloadName(snapshot)]]">
<paper-icon-button icon="mdi:download" class="download" title="Download snapshot"></paper-icon-button>
<paper-icon-button icon="hassio:download" class="download" title="Download snapshot"></paper-icon-button>
</a>
<paper-button on-click="_partialRestoreClicked">Restore selected</paper-button>
<template is="dom-if" if="[[_isFullSnapshot(snapshot.type)]]">

2
hassio/src/snapshots/hassio-snapshots.js
View File

@ -233,7 +233,7 @@ class HassioSnapshots extends EventsMixin(PolymerElement) {
}
_computeIcon(type) {
return type === 'full' ? 'mdi:package-variant-closed' : 'mdi:package-variant';
return type === 'full' ? 'hassio:package-variant-closed' : 'hassio:package-variant';
}
_snapshotClicked(ev) {

10
hassio/webpack.config.js
View File

@ -53,7 +53,17 @@ module.exports = {
],
},
},
},
{
test: /\.(html)$/,
use: {
loader: 'html-loader',
options: {
exportAsEs6Default: true,
}
}
}
]
},
plugins,

2
index.html
View File

@ -99,7 +99,7 @@
<!--EXTRA_SCRIPTS-->
<script src='/frontend_latest/core.js'></script>
<script src='/frontend_latest/app.js'></script>
<script src='/frontend_latest/mdi.js' async></script>
<script src='/frontend_latest/hass-icons.js' async></script>
{% for extra_url in extra_urls -%}
<link rel='import' href='{{ extra_url }}' async>
{% endfor -%}

12
src/cards/ha-media_player-card.js
View File

@ -169,15 +169,15 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
<paper-progress max="[[stateObj.attributes.media_duration]]" value="[[playbackPosition]]" hidden\$="[[computeHideProgress(playerObj)]]" class="progress"></paper-progress>
<div class="controls layout horizontal justified">
<paper-icon-button icon="mdi:power" on-click="handleTogglePower" invisible\$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
<paper-icon-button icon="hass:power" on-click="handleTogglePower" invisible\$="[[computeHidePowerButton(playerObj)]]" class="self-center secondary"></paper-icon-button>
<div>
<paper-icon-button icon="mdi:skip-previous" invisible\$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
<paper-icon-button icon="hass:skip-previous" invisible\$="[[!playerObj.supportsPreviousTrack]]" disabled="[[playerObj.isOff]]" on-click="handlePrevious"></paper-icon-button>
<paper-icon-button class="primary" icon="[[computePlaybackControlIcon(playerObj)]]" invisible\$="[[!computePlaybackControlIcon(playerObj)]]" disabled="[[playerObj.isOff]]" on-click="handlePlaybackControl"></paper-icon-button>
<paper-icon-button icon="mdi:skip-next" invisible\$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
<paper-icon-button icon="hass:skip-next" invisible\$="[[!playerObj.supportsNextTrack]]" disabled="[[playerObj.isOff]]" on-click="handleNext"></paper-icon-button>
</div>
<paper-icon-button icon="mdi:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
<paper-icon-button icon="hass:dots-vertical" on-click="handleOpenMoreInfo" class="self-center secondary"></paper-icon-button>
</div>
`;
@ -272,9 +272,9 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
computePlaybackControlIcon(playerObj) {
if (playerObj.isPlaying) {
return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
} else if (playerObj.isPaused || playerObj.isOff || playerObj.isIdle) {
return playerObj.supportsPlay ? 'mdi:play' : null;
return playerObj.supportsPlay ? 'hass:play' : null;
}
return '';
}

10
src/cards/ha-plant-card.js
View File

@ -92,11 +92,11 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
constructor() {
super();
this.sensors = {
moisture: 'mdi:water',
temperature: 'mdi:thermometer',
brightness: 'mdi:white-balance-sunny',
conductivity: 'mdi:emoticon-poop',
battery: 'mdi:battery'
moisture: 'hass:water',
temperature: 'hass:thermometer',
brightness: 'hass:white-balance-sunny',
conductivity: 'hass:emoticon-poop',
battery: 'hass:battery'
};
}

26
src/cards/ha-weather-card.js
View File

@ -164,20 +164,20 @@ class HaWeatherCard extends
'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
];
this.weatherIcons = {
'clear-night': 'mdi:weather-night',
cloudy: 'mdi:weather-cloudy',
fog: 'mdi:weather-fog',
hail: 'mdi:weather-hail',
'clear-night': 'hass:weather-night',
cloudy: 'hass:weather-cloudy',
fog: 'hass:weather-fog',
hail: 'hass:weather-hail',
lightning: 'mid:weather-lightning',
'lightning-rainy': 'mdi:weather-lightning-rainy',
partlycloudy: 'mdi:weather-partlycloudy',
pouring: 'mdi:weather-pouring',
rainy: 'mdi:weather-rainy',
snowy: 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy',
sunny: 'mdi:weather-sunny',
windy: 'mdi:weather-windy',
'windy-variant': 'mdi:weather-windy-variant'
'lightning-rainy': 'hass:weather-lightning-rainy',
partlycloudy: 'hass:weather-partlycloudy',
pouring: 'hass:weather-pouring',
rainy: 'hass:weather-rainy',
snowy: 'hass:weather-snowy',
'snowy-rainy': 'hass:weather-snowy-rainy',
sunny: 'hass:weather-sunny',
windy: 'hass:weather-windy',
'windy-variant': 'hass:weather-windy-variant'
};
}

2
src/common/const.js
View File

@ -5,7 +5,7 @@
// Each constant should have a description what it is supposed to be used for.
/** Icon to use when no icon specified for domain. */
export const DEFAULT_DOMAIN_ICON = 'mdi:bookmark';
export const DEFAULT_DOMAIN_ICON = 'hass:bookmark';
/** Domains that have a state card. */
export const DOMAINS_WITH_CARD = [

38
src/common/entity/binary_sensor_icon.js
View File

@ -4,46 +4,46 @@ export default function binarySensorIcon(state) {
var activated = state.state && state.state === 'off';
switch (state.attributes.device_class) {
case 'battery':
return activated ? 'mdi:battery' : 'mdi:battery-outline';
return activated ? 'hass:battery' : 'hass:battery-outline';
case 'cold':
return activated ? 'mdi:thermometer' : 'mdi:snowflake';
return activated ? 'hass:thermometer' : 'hass:snowflake';
case 'connectivity':
return activated ? 'mdi:server-network-off' : 'mdi:server-network';
return activated ? 'hass:server-network-off' : 'hass:server-network';
case 'door':
return activated ? 'mdi:door-closed' : 'mdi:door-open';
return activated ? 'hass:door-closed' : 'hass:door-open';
case 'garage_door':
return activated ? 'mdi:garage' : 'mdi:garage-open';
return activated ? 'hass:garage' : 'hass:garage-open';
case 'gas':
case 'power':
case 'problem':
case 'safety':
case 'smoke':
return activated ? 'mdi:verified' : 'mdi:alert';
return activated ? 'hass:verified' : 'hass:alert';
case 'heat':
return activated ? 'mdi:thermometer' : 'mdi:fire';
return activated ? 'hass:thermometer' : 'hass:fire';
case 'light':
return activated ? 'mdi:brightness-5' : 'mdi:brightness-7';
return activated ? 'hass:brightness-5' : 'hass:brightness-7';
case 'lock':
return activated ? 'mdi:lock' : 'mdi:lock-open';
return activated ? 'hass:lock' : 'hass:lock-open';
case 'moisture':
return activated ? 'mdi:water-off' : 'mdi:water';
return activated ? 'hass:water-off' : 'hass:water';
case 'motion':
return activated ? 'mdi:walk' : 'mdi:run';
return activated ? 'hass:walk' : 'hass:run';
case 'occupancy':
return activated ? 'mdi:home-outline' : 'mdi:home';
return activated ? 'hass:home-outline' : 'hass:home';
case 'opening':
return activated ? 'mdi:square' : 'mdi:square-outline';
return activated ? 'hass:square' : 'hass:square-outline';
case 'plug':
return activated ? 'mdi:power-plug-off' : 'mdi:power-plug';
return activated ? 'hass:power-plug-off' : 'hass:power-plug';
case 'presence':
return activated ? 'mdi:home-outline' : 'mdi:home';
return activated ? 'hass:home-outline' : 'hass:home';
case 'sound':
return activated ? 'mdi:music-note-off' : 'mdi:music-note';
return activated ? 'hass:music-note-off' : 'hass:music-note';
case 'vibration':
return activated ? 'mdi:crop-portrait' : 'mdi:vibrate';
return activated ? 'hass:crop-portrait' : 'hass:vibrate';
case 'window':
return activated ? 'mdi:window-closed' : 'mdi:window-open';
return activated ? 'hass:window-closed' : 'hass:window-open';
default:
return activated ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
return activated ? 'hass:radiobox-blank' : 'hass:checkbox-marked-circle';
}
}

2
src/common/entity/cover_icon.js
View File

@ -5,7 +5,7 @@ export default function coverIcon(state) {
var open = state.state && state.state !== 'closed';
switch (state.attributes.device_class) {
case 'garage':
return open ? 'mdi:garage-open' : 'mdi:garage';
return open ? 'hass:garage-open' : 'hass:garage';
default:
return domainIcon('cover', state.state);
}

92
src/common/entity/domain_icon.js
View File

@ -6,39 +6,39 @@
import { DEFAULT_DOMAIN_ICON } from '../const.js';
const fixedIcons = {
automation: 'mdi:playlist-play',
calendar: 'mdi:calendar',
camera: 'mdi:video',
climate: 'mdi:thermostat',
configurator: 'mdi:settings',
conversation: 'mdi:text-to-speech',
device_tracker: 'mdi:account',
fan: 'mdi:fan',
group: 'mdi:google-circles-communities',
history_graph: 'mdi:chart-line',
homeassistant: 'mdi:home-assistant',
image_processing: 'mdi:image-filter-frames',
input_boolean: 'mdi:drawing',
input_datetime: 'mdi:calendar-clock',
input_number: 'mdi:ray-vertex',
input_select: 'mdi:format-list-bulleted',
input_text: 'mdi:textbox',
light: 'mdi:lightbulb',
mailbox: 'mdi:mailbox',
notify: 'mdi:comment-alert',
plant: 'mdi:flower',
proximity: 'mdi:apple-safari',
remote: 'mdi:remote',
scene: 'mdi:google-pages',
script: 'mdi:file-document',
sensor: 'mdi:eye',
simple_alarm: 'mdi:bell',
sun: 'mdi:white-balance-sunny',
switch: 'mdi:flash',
timer: 'mdi:timer',
updater: 'mdi:cloud-upload',
vacuum: 'mdi:robot-vacuum',
weblink: 'mdi:open-in-new',
automation: 'hass:playlist-play',
calendar: 'hass:calendar',
camera: 'hass:video',
climate: 'hass:thermostat',
configurator: 'hass:settings',
conversation: 'hass:text-to-speech',
device_tracker: 'hass:account',
fan: 'hass:fan',
group: 'hass:google-circles-communities',
history_graph: 'hass:chart-line',
homeassistant: 'hass:home-assistant',
image_processing: 'hass:image-filter-frames',
input_boolean: 'hass:drawing',
input_datetime: 'hass:calendar-clock',
input_number: 'hass:ray-vertex',
input_select: 'hass:format-list-bulleted',
input_text: 'hass:textbox',
light: 'hass:lightbulb',
mailbox: 'hass:mailbox',
notify: 'hass:comment-alert',
plant: 'hass:flower',
proximity: 'hass:apple-safari',
remote: 'hass:remote',
scene: 'hass:google-pages',
script: 'hass:file-document',
sensor: 'hass:eye',
simple_alarm: 'hass:bell',
sun: 'hass:white-balance-sunny',
switch: 'hass:flash',
timer: 'hass:timer',
updater: 'hass:cloud-upload',
vacuum: 'hass:robot-vacuum',
weblink: 'hass:open-in-new',
};
export default function domainIcon(domain, state) {
@ -50,40 +50,40 @@ export default function domainIcon(domain, state) {
case 'alarm_control_panel':
switch (state) {
case 'armed_home':
return 'mdi:bell-plus';
return 'hass:bell-plus';
case 'armed_night':
return 'mdi:bell-sleep';
return 'hass:bell-sleep';
case 'disarmed':
return 'mdi:bell-outline';
return 'hass:bell-outline';
case 'triggered':
return 'mdi:bell-ring';
return 'hass:bell-ring';
default:
return 'mdi:bell';
return 'hass:bell';
}
case 'binary_sensor':
return state && state === 'off' ? 'mdi:radiobox-blank' : 'mdi:checkbox-marked-circle';
return state && state === 'off' ? 'hass:radiobox-blank' : 'hass:checkbox-marked-circle';
case 'cover':
return state && state === 'open' ? 'mdi:window-open' : 'mdi:window-closed';
return state && state === 'open' ? 'hass:window-open' : 'hass:window-closed';
case 'lock':
return state && state === 'unlocked' ? 'mdi:lock-open' : 'mdi:lock';
return state && state === 'unlocked' ? 'hass:lock-open' : 'hass:lock';
case 'media_player':
return state && state !== 'off' && state !== 'idle' ?
'mdi:cast-connected' : 'mdi:cast';
'hass:cast-connected' : 'hass:cast';
case 'zwave':
switch (state) {
case 'dead':
return 'mdi:emoticon-dead';
return 'hass:emoticon-dead';
case 'sleeping':
return 'mdi:sleep';
return 'hass:sleep';
case 'initializing':
return 'mdi:timer-sand';
return 'hass:timer-sand';
default:
return 'mdi:nfc';
return 'hass:nfc';
}
default:

4
src/common/entity/input_dateteime_icon.js
View File

@ -3,9 +3,9 @@ import domainIcon from './domain_icon.js';
export default function inputDateTimeIcon(state) {
if (!state.attributes.has_date) {
return 'mdi:clock';
return 'hass:clock';
} else if (!state.attributes.has_time) {
return 'mdi:calendar';
return 'hass:calendar';
}
return domainIcon('input_datetime');
}

27
src/common/entity/sensor_icon.js
View File

@ -3,9 +3,9 @@ import { UNIT_C, UNIT_F } from '../const.js';
import domainIcon from './domain_icon.js';
const fixedDeviceClassIcons = {
humidity: 'mdi:water-percent',
illuminance: 'mdi:brightness-5',
temperature: 'mdi:thermometer',
humidity: 'hass:water-percent',
illuminance: 'hass:brightness-5',
temperature: 'hass:thermometer',
};
export default function sensorIcon(state) {
@ -15,21 +15,32 @@ export default function sensorIcon(state) {
return fixedDeviceClassIcons[dclass];
} else if (dclass === 'battery') {
if (isNaN(state.state)) {
return 'mdi:battery-unknown';
return 'hass:battery-unknown';
}
const batteryRound = Math.round(state.state / 10) * 10;
if (batteryRound >= 100) {
return 'mdi:battery';
return 'hass:battery';
}
if (batteryRound <= 0) {
return 'mdi:battery-alert';
return 'hass:battery-alert';
}
return `mdi:battery-${batteryRound}`;
// Will return one of the following icons: (listed so extractor picks up)
// hass:battery-10
// hass:battery-20
// hass:battery-30
// hass:battery-40
// hass:battery-50
// hass:battery-60
// hass:battery-70
// hass:battery-80
// hass:battery-90
// We obscure 'hass' in iconname so this name does not get picked up
return `${'hass'}:battery-${batteryRound}`;
}
const unit = state.attributes.unit_of_measurement;
if (unit === UNIT_C || unit === UNIT_F) {
return 'mdi:thermometer';
return 'hass:thermometer';
}
return domainIcon('sensor');
}

4
src/components/entity/ha-entity-picker.js
View File

@ -40,7 +40,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
on-change='_fireChanged'
>
<paper-input autofocus="[[autofocus]]" label="[[_computeLabel(label, localize)]]" class="input" value="[[value]]" disabled="[[disabled]]">
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="clear-button" icon="hass:close" no-ripple="" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden="[[!_states.length]]">Toggle</paper-icon-button>
</paper-input>
<template>
@ -142,7 +142,7 @@ class HaEntityPicker extends EventsMixin(LocalizeMixin(PolymerElement)) {
}
_computeToggleIcon(opened) {
return opened ? 'mdi:menu-up' : 'mdi:menu-down';
return opened ? 'hass:menu-up' : 'hass:menu-down';
}
_fireChanged(ev) {

4
src/components/entity/ha-entity-toggle.js
View File

@ -30,8 +30,8 @@ class HaEntityToggle extends PolymerElement {
</style>
<template is="dom-if" if="[[stateObj.attributes.assumed_state]]">
<paper-icon-button icon="mdi:flash-off" on-click="turnOff" state-active\$="[[!isOn]]"></paper-icon-button>
<paper-icon-button icon="mdi:flash" on-click="turnOn" state-active\$="[[isOn]]"></paper-icon-button>
<paper-icon-button icon="hass:flash-off" on-click="turnOff" state-active\$="[[!isOn]]"></paper-icon-button>
<paper-icon-button icon="hass:flash" on-click="turnOn" state-active\$="[[isOn]]"></paper-icon-button>
</template>
<template is="dom-if" if="[[!stateObj.attributes.assumed_state]]">
<paper-toggle-button checked="[[toggleChecked]]" on-change="toggleChanged"></paper-toggle-button>

6
src/components/entity/ha-state-icon.js
View File

@ -1,14 +1,12 @@
import '@polymer/iron-icon/iron-icon.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../ha-icon.js';
import stateIcon from '../../common/entity/state_icon.js';
class HaStateIcon extends PolymerElement {
static get template() {
return html`
<iron-icon icon="[[computeIcon(stateObj)]]"></iron-icon>
`;
return html`<ha-icon icon="[[computeIcon(stateObj)]]"></ha-icon>`;
}
static get properties() {

16
src/components/entity/ha-state-label-badge.js
View File

@ -132,17 +132,17 @@ class HaStateLabelBadge extends
switch (domain) {
case 'alarm_control_panel':
if (state.state === 'pending') {
return 'mdi:clock-fast';
return 'hass:clock-fast';
} else if (state.state === 'armed_away') {
return 'mdi:nature';
return 'hass:nature';
} else if (state.state === 'armed_home') {
return 'mdi:home-variant';
return 'hass:home-variant';
} else if (state.state === 'armed_night') {
return 'mdi:weather-night';
return 'hass:weather-night';
} else if (state.state === 'armed_custom_bypass') {
return 'mdi:security-home';
return 'hass:security-home';
} else if (state.state === 'triggered') {
return 'mdi:alert-circle';
return 'hass:alert-circle';
}
// state == 'disarmed'
return domainIcon(domain, state.state);
@ -152,9 +152,9 @@ class HaStateLabelBadge extends
return stateIcon(state);
case 'sun':
return state.state === 'above_horizon' ?
domainIcon(domain) : 'mdi:brightness-3';
domainIcon(domain) : 'hass:brightness-3';
case 'timer':
return state.state === 'active' ? 'mdi:timer' : 'mdi:timer-off';
return state.state === 'active' ? 'hass:timer' : 'hass:timer-off';
default:
return null;
}

4
src/components/ha-climate-control.js
View File

@ -42,10 +42,10 @@ class HaClimateControl extends EventsMixin(PolymerElement) {
</div>
<div class="control-buttons">
<div>
<paper-icon-button icon="mdi:chevron-up" on-click="incrementValue"></paper-icon-button>
<paper-icon-button icon="hass:chevron-up" on-click="incrementValue"></paper-icon-button>
</div>
<div>
<paper-icon-button icon="mdi:chevron-down" on-click="decrementValue"></paper-icon-button>
<paper-icon-button icon="hass:chevron-down" on-click="decrementValue"></paper-icon-button>
</div>
</div>
`;

4
src/components/ha-combo-box.js
View File

@ -31,7 +31,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
on-change='_fireChanged'
>
<paper-input autofocus="[[autofocus]]" label="[[label]]" class="input" value="[[value]]">
<paper-icon-button slot="suffix" class="clear-button" icon="mdi:close" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="clear-button" icon="hass:close" hidden\$="[[!value]]">Clear</paper-icon-button>
<paper-icon-button slot="suffix" class="toggle-button" icon="[[_computeToggleIcon(opened)]]" hidden\$="[[!items.length]]">Toggle</paper-icon-button>
</paper-input>
<template>
@ -83,7 +83,7 @@ class HaComboBox extends EventsMixin(PolymerElement) {
}
_computeToggleIcon(opened) {
return opened ? 'mdi:menu-up' : 'mdi:menu-down';
return opened ? 'hass:menu-up' : 'hass:menu-down';
}
_computeItemLabel(item, itemLabelPath) {

6
src/components/ha-cover-controls.js
View File

@ -17,9 +17,9 @@ class HaCoverControls extends PolymerElement {
</style>
<div class="state">
<paper-icon-button icon="mdi:arrow-up" on-click="onOpenTap" invisible\$="[[!entityObj.supportsOpen]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="mdi:stop" on-click="onStopTap" invisible\$="[[!entityObj.supportsStop]]"></paper-icon-button>
<paper-icon-button icon="mdi:arrow-down" on-click="onCloseTap" invisible\$="[[!entityObj.supportsClose]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:arrow-up" on-click="onOpenTap" invisible\$="[[!entityObj.supportsOpen]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:stop" on-click="onStopTap" invisible\$="[[!entityObj.supportsStop]]"></paper-icon-button>
<paper-icon-button icon="hass:arrow-down" on-click="onCloseTap" invisible\$="[[!entityObj.supportsClose]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
</div>
`;
}

6
src/components/ha-cover-tilt-controls.js
View File

@ -17,9 +17,9 @@ class HaCoverTiltControls extends PolymerElement {
visibility: hidden !important;
}
</style>
<paper-icon-button icon="mdi:arrow-top-right" on-click="onOpenTiltTap" title="Open tilt" invisible\$="[[!entityObj.supportsOpenTilt]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="mdi:stop" on-click="onStopTiltTap" invisible\$="[[!entityObj.supportsStopTilt]]" title="Stop tilt"></paper-icon-button>
<paper-icon-button icon="mdi:arrow-bottom-left" on-click="onCloseTiltTap" title="Close tilt" invisible\$="[[!entityObj.supportsCloseTilt]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:arrow-top-right" on-click="onOpenTiltTap" title="Open tilt" invisible\$="[[!entityObj.supportsOpenTilt]]" disabled="[[computeOpenDisabled(stateObj, entityObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:stop" on-click="onStopTiltTap" invisible\$="[[!entityObj.supportsStopTilt]]" title="Stop tilt"></paper-icon-button>
<paper-icon-button icon="hass:arrow-bottom-left" on-click="onCloseTiltTap" title="Close tilt" invisible\$="[[!entityObj.supportsCloseTilt]]" disabled="[[computeClosedDisabled(stateObj, entityObj)]]"></paper-icon-button>
`;
}

2
src/components/ha-demo-badge.js
View File

@ -12,7 +12,7 @@ class HaDemoBadge extends PolymerElement {
}
</style>
<ha-label-badge icon="mdi:emoticon" label="Demo" description=""></ha-label-badge>
<ha-label-badge icon="hass:emoticon" label="Demo" description=""></ha-label-badge>
`;
}
}

18
src/components/ha-icon.js Normal file
View File

@ -0,0 +1,18 @@
import '@polymer/iron-icon/iron-icon.js';
const IronIconClass = customElements.get('iron-icon');
let loaded = false;
class HaIcon extends IronIconClass {
listen(...args) {
super.listen(...args);
if (!loaded && this._iconsetName === 'mdi') {
loaded = true;
import(/* webpackChunkName: "mdi-icons" */ '../resources/mdi-icons.js');
}
}
}
customElements.define('ha-icon', HaIcon);

2
src/components/ha-menu-button.js
View File

@ -15,7 +15,7 @@ class HaMenuButton extends EventsMixin(PolymerElement) {
visibility: hidden;
}
</style>
<paper-icon-button icon="mdi:menu" class\$="[[computeMenuButtonClass(narrow, showMenu)]]" on-click="toggleMenu"></paper-icon-button>
<paper-icon-button icon="hass:menu" class\$="[[computeMenuButtonClass(narrow, showMenu)]]" on-click="toggleMenu"></paper-icon-button>
`;
}

23
src/components/ha-sidebar.js
View File

@ -1,13 +1,12 @@
import '@polymer/app-layout/app-toolbar/app-toolbar.js';
import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/paper-icon-button/paper-icon-button.js';
import '@polymer/paper-item/paper-icon-item.js';
import '@polymer/paper-item/paper-item.js';
import '@polymer/paper-listbox/paper-listbox.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../components/ha-icon.js';
import '../util/hass-translation.js';
import NavigateMixin from '../mixins/navigate-mixin.js';
@ -103,24 +102,24 @@ class HaSidebar extends
<app-toolbar>
<div main-title="">Home Assistant</div>
<paper-icon-button icon="mdi:chevron-left" hidden\$="[[narrow]]" on-click="toggleMenu"></paper-icon-button>
<paper-icon-button icon="hass:chevron-left" hidden\$="[[narrow]]" on-click="toggleMenu"></paper-icon-button>
</app-toolbar>
<paper-listbox attr-for-selected="data-panel" selected="[[hass.panelUrl]]">
<paper-icon-item on-click="menuClicked" data-panel="states">
<iron-icon slot="item-icon" icon="mdi:apps"></iron-icon>
<ha-icon slot="item-icon" icon="hass:apps"></ha-icon>
<span class="item-text">[[localize('panel.states')]]</span>
</paper-icon-item>
<template is="dom-repeat" items="[[panels]]">
<paper-icon-item on-click="menuClicked">
<iron-icon slot="item-icon" icon="[[item.icon]]"></iron-icon>
<ha-icon slot="item-icon" icon="[[item.icon]]"></ha-icon>
<span class="item-text">[[computePanelName(localize, item)]]</span>
</paper-icon-item>
</template>
<paper-icon-item on-click="menuClicked" data-panel="logout" class="logout">
<iron-icon slot="item-icon" icon="mdi:exit-to-app"></iron-icon>
<ha-icon slot="item-icon" icon="hass:exit-to-app"></ha-icon>
<span class="item-text">[[localize('ui.sidebar.log_out')]]</span>
</paper-icon-item>
</paper-listbox>
@ -131,14 +130,14 @@ class HaSidebar extends
<div class="subheader">[[localize('ui.sidebar.developer_tools')]]</div>
<div class="dev-tools layout horizontal justified">
<paper-icon-button icon="mdi:remote" data-panel="dev-service" alt="[[localize('panel.dev-services')]]" title="[[localize('panel.dev-services')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="mdi:code-tags" data-panel="dev-state" alt="[[localize('panel.dev-states')]]" title="[[localize('panel.dev-states')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="mdi:radio-tower" data-panel="dev-event" alt="[[localize('panel.dev-events')]]" title="[[localize('panel.dev-events')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="mdi:file-xml" data-panel="dev-template" alt="[[localize('panel.dev-templates')]]" title="[[localize('panel.dev-templates')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:remote" data-panel="dev-service" alt="[[localize('panel.dev-services')]]" title="[[localize('panel.dev-services')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:code-tags" data-panel="dev-state" alt="[[localize('panel.dev-states')]]" title="[[localize('panel.dev-states')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:radio-tower" data-panel="dev-event" alt="[[localize('panel.dev-events')]]" title="[[localize('panel.dev-events')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:file-xml" data-panel="dev-template" alt="[[localize('panel.dev-templates')]]" title="[[localize('panel.dev-templates')]]" on-click="menuClicked"></paper-icon-button>
<template is="dom-if" if="[[_mqttLoaded(hass)]]">
<paper-icon-button icon="mdi:altimeter" data-panel="dev-mqtt" alt="[[localize('panel.dev-mqtt')]]" title="[[localize('panel.dev-mqtt')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:altimeter" data-panel="dev-mqtt" alt="[[localize('panel.dev-mqtt')]]" title="[[localize('panel.dev-mqtt')]]" on-click="menuClicked"></paper-icon-button>
</template>
<paper-icon-button icon="mdi:information-outline" data-panel="dev-info" alt="[[localize('panel.dev-info')]]" title="[[localize('panel.dev-info')]]" on-click="menuClicked"></paper-icon-button>
<paper-icon-button icon="hass:information-outline" data-panel="dev-info" alt="[[localize('panel.dev-info')]]" title="[[localize('panel.dev-info')]]" on-click="menuClicked"></paper-icon-button>
</div>
</div>
`;

2
src/components/ha-start-voice-button.js
View File

@ -12,7 +12,7 @@ import isComponentLoaded from '../common/config/is_component_loaded.js';
class HaStartVoiceButton extends EventsMixin(PolymerElement) {
static get template() {
return html`
<paper-icon-button icon="mdi:microphone" hidden\$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>
<paper-icon-button icon="hass:microphone" hidden\$="[[!canListen]]" on-click="handleListenClick"></paper-icon-button>
`;
}

2
src/dialogs/ha-voice-command-dialog.js
View File

@ -126,7 +126,7 @@ class HaVoiceCommandDialog extends DialogMixin(PolymerElement) {
</div>
</template>
<div class="icon" hidden\$="[[results]]">
<paper-icon-button icon="mdi:text-to-speech" on-click="startListening"></paper-icon-button>
<paper-icon-button icon="hass:text-to-speech" on-click="startListening"></paper-icon-button>
</div>
</div>
`;

4
src/dialogs/more-info/controls/more-info-fan.js
View File

@ -65,8 +65,8 @@ class MoreInfoFan extends EventsMixin(PolymerElement) {
<div class="container-direction">
<div class="direction">
<div>Direction</div>
<paper-icon-button icon="mdi:rotate-left" on-click="onDirectionLeft" title="Left" disabled="[[computeIsRotatingLeft(stateObj)]]"></paper-icon-button>
<paper-icon-button icon="mdi:rotate-right" on-click="onDirectionRight" title="Right" disabled="[[computeIsRotatingRight(stateObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:rotate-left" on-click="onDirectionLeft" title="Left" disabled="[[computeIsRotatingLeft(stateObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:rotate-right" on-click="onDirectionRight" title="Right" disabled="[[computeIsRotatingRight(stateObj)]]"></paper-icon-button>
</div>
</div>
</div>

6
src/dialogs/more-info/controls/more-info-light.js
View File

@ -83,15 +83,15 @@ import EventsMixin from '../../../mixins/events-mixin.js';
<div class\$="[[computeClassNames(stateObj)]]">
<div class="control brightness">
<ha-labeled-slider caption="Brightness" icon="mdi:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
<ha-labeled-slider caption="Brightness" icon="hass:brightness-5" max="255" value="{{brightnessSliderValue}}" on-change="brightnessSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
</div>
<div class="control color_temp">
<ha-labeled-slider caption="Color Temperature" icon="mdi:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
<ha-labeled-slider caption="Color Temperature" icon="hass:thermometer" min="[[stateObj.attributes.min_mireds]]" max="[[stateObj.attributes.max_mireds]]" value="{{ctSliderValue}}" on-change="ctSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
</div>
<div class="control white_value">
<ha-labeled-slider caption="White Value" icon="mdi:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
<ha-labeled-slider caption="White Value" icon="hass:file-word-box" max="255" value="{{wvSliderValue}}" on-change="wvSliderChanged" ignore-bar-touch=""></ha-labeled-slider>
</div>
<ha-color-picker class="control color" on-colorselected="colorPicked" desired-hs-color="{{colorPickerColor}}" throttle="500" hue-segments="24" saturation-segments="8">

22
src/dialogs/more-info/controls/more-info-media_player.js
View File

@ -65,21 +65,21 @@ import EventsMixin from '../../../mixins/events-mixin.js';
<div class\$="[[computeClassNames(stateObj)]]">
<div class="layout horizontal">
<div class="flex">
<paper-icon-button icon="mdi:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
<paper-icon-button icon="hass:power" highlight\$="[[playerObj.isOff]]" on-click="handleTogglePower" hidden\$="[[computeHidePowerButton(playerObj)]]"></paper-icon-button>
</div>
<div>
<template is="dom-if" if="[[computeShowPlaybackControls(playerObj)]]">
<paper-icon-button icon="mdi:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
<paper-icon-button icon="hass:skip-previous" on-click="handlePrevious" hidden\$="[[!playerObj.supportsPreviousTrack]]"></paper-icon-button>
<paper-icon-button icon="[[computePlaybackControlIcon(playerObj)]]" on-click="handlePlaybackControl" hidden\$="[[!computePlaybackControlIcon(playerObj)]]" highlight=""></paper-icon-button>
<paper-icon-button icon="mdi:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
<paper-icon-button icon="hass:skip-next" on-click="handleNext" hidden\$="[[!playerObj.supportsNextTrack]]"></paper-icon-button>
</template>
</div>
</div>
<!-- VOLUME -->
<div class="volume_buttons center horizontal layout" hidden\$="[[computeHideVolumeButtons(playerObj)]]">
<paper-icon-button on-click="handleVolumeTap" icon="mdi:volume-off"></paper-icon-button>
<paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="mdi:volume-medium"></paper-icon-button>
<paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="mdi:volume-high"></paper-icon-button>
<paper-icon-button on-click="handleVolumeTap" icon="hass:volume-off"></paper-icon-button>
<paper-icon-button id="volumeDown" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeDown" on-touchstart="handleVolumeDown" icon="hass:volume-medium"></paper-icon-button>
<paper-icon-button id="volumeUp" disabled\$="[[playerObj.isMuted]]" on-mousedown="handleVolumeUp" on-touchstart="handleVolumeUp" icon="hass:volume-high"></paper-icon-button>
</div>
<div class="volume center horizontal layout" hidden\$="[[!playerObj.supportsVolumeSet]]">
<paper-icon-button on-click="handleVolumeTap" hidden\$="[[playerObj.supportsVolumeButtons]]" icon="[[computeMuteVolumeIcon(playerObj)]]"></paper-icon-button>
@ -88,7 +88,7 @@ import EventsMixin from '../../../mixins/events-mixin.js';
</div>
<!-- SOURCE PICKER -->
<div class="controls layout horizontal justified" hidden\$="[[computeHideSelectSource(playerObj)]]">
<iron-icon class="source-input" icon="mdi:login-variant"></iron-icon>
<iron-icon class="source-input" icon="hass:login-variant"></iron-icon>
<paper-dropdown-menu class="flex source-input" dynamic-align="" label-float="" label="Source">
<paper-listbox slot="dropdown-content" selected="{{sourceIndex}}">
<template is="dom-repeat" items="[[playerObj.sourceList]]">
@ -100,7 +100,7 @@ import EventsMixin from '../../../mixins/events-mixin.js';
<!-- TTS -->
<div hidden\$="[[computeHideTTS(ttsLoaded, playerObj)]]" class="layout horizontal end">
<paper-input id="ttsInput" label="Text to speak" class="flex" value="{{ttsMessage}}" on-keydown="ttsCheckForEnter"></paper-input>
<paper-icon-button icon="mdi:send" on-click="sendTTS"></paper-icon-button>
<paper-icon-button icon="hass:send" on-click="sendTTS"></paper-icon-button>
</div>
</div>
`;
@ -156,7 +156,7 @@ import EventsMixin from '../../../mixins/events-mixin.js';
}
computeMuteVolumeIcon(playerObj) {
return playerObj.isMuted ? 'mdi:volume-off' : 'mdi:volume-high';
return playerObj.isMuted ? 'hass:volume-off' : 'hass:volume-high';
}
computeHideVolumeButtons(playerObj) {
@ -169,9 +169,9 @@ import EventsMixin from '../../../mixins/events-mixin.js';
computePlaybackControlIcon(playerObj) {
if (playerObj.isPlaying) {
return playerObj.supportsPause ? 'mdi:pause' : 'mdi:stop';
return playerObj.supportsPause ? 'hass:pause' : 'hass:stop';
}
return playerObj.supportsPlay ? 'mdi:play' : null;
return playerObj.supportsPlay ? 'hass:play' : null;
}
computeHidePowerButton(playerObj) {

12
src/dialogs/more-info/controls/more-info-vacuum.js
View File

@ -42,19 +42,19 @@ class MoreInfoVacuum extends PolymerElement {
<div class="status-subtitle">Vacuum cleaner commands:</div>
<div class="horizontal justified layout">
<div hidden\$="[[!supportsPause(stateObj)]]">
<paper-icon-button icon="mdi:play-pause" on-click="onPlayPause" title="Start/Pause"></paper-icon-button>
<paper-icon-button icon="hass:play-pause" on-click="onPlayPause" title="Start/Pause"></paper-icon-button>
</div>
<div hidden\$="[[!supportsStop(stateObj)]]">
<paper-icon-button icon="mdi:stop" on-click="onStop" title="Stop"></paper-icon-button>
<paper-icon-button icon="hass:stop" on-click="onStop" title="Stop"></paper-icon-button>
</div>
<div hidden\$="[[!supportsCleanSpot(stateObj)]]">
<paper-icon-button icon="mdi:broom" on-click="onCleanSpot" title="Clean spot"></paper-icon-button>
<paper-icon-button icon="hass:broom" on-click="onCleanSpot" title="Clean spot"></paper-icon-button>
</div>
<div hidden\$="[[!supportsLocate(stateObj)]]">
<paper-icon-button icon="mdi:map-marker" on-click="onLocate" title="Locate"></paper-icon-button>
<paper-icon-button icon="hass:map-marker" on-click="onLocate" title="Locate"></paper-icon-button>
</div>
<div hidden\$="[[!supportsReturnHome(stateObj)]]">
<paper-icon-button icon="mdi:home-map-marker" on-click="onReturnHome" title="Return home"></paper-icon-button>
<paper-icon-button icon="hass:home-map-marker" on-click="onReturnHome" title="Return home"></paper-icon-button>
</div>
</div>
</div>
@ -69,7 +69,7 @@ class MoreInfoVacuum extends PolymerElement {
</paper-listbox>
</paper-dropdown-menu>
<div style="justify-content: center; align-self: center; padding-top: 1.3em">
<span><iron-icon icon="mdi:fan"></iron-icon> [[stateObj.attributes.fan_speed]]</span>
<span><iron-icon icon="hass:fan"></iron-icon> [[stateObj.attributes.fan_speed]]</span>
</div>
</div>
<p></p>

36
src/dialogs/more-info/controls/more-info-weather.js
View File

@ -48,34 +48,34 @@ class MoreInfoWeather extends LocalizeMixin(PolymerElement) {
</style>
<div class="flex">
<iron-icon icon="mdi:thermometer"></iron-icon>
<iron-icon icon="hass:thermometer"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.temperature')]]</div>
<div>[[stateObj.attributes.temperature]] [[getUnit('temperature')]]</div>
</div>
<template is="dom-if" if="[[stateObj.attributes.pressure]]">
<div class="flex">
<iron-icon icon="mdi:gauge"></iron-icon>
<iron-icon icon="hass:gauge"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.air_pressure')]]</div>
<div>[[stateObj.attributes.pressure]] hPa</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.humidity]]">
<div class="flex">
<iron-icon icon="mdi:water-percent"></iron-icon>
<iron-icon icon="hass:water-percent"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.humidity')]]</div>
<div>[[stateObj.attributes.humidity]] %</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.wind_speed]]">
<div class="flex">
<iron-icon icon="mdi:weather-windy"></iron-icon>
<iron-icon icon="hass:weather-windy"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.wind_speed')]]</div>
<div>[[getWind(stateObj.attributes.wind_speed, stateObj.attributes.wind_bearing, localize)]]</div>
</div>
</template>
<template is="dom-if" if="[[stateObj.attributes.visibility]]">
<div class="flex">
<iron-icon icon="mdi:eye"></iron-icon>
<iron-icon icon="hass:eye"></iron-icon>
<div class="main">[[localize('ui.card.weather.attributes.visibility')]]</div>
<div>[[stateObj.attributes.visibility]] [[getUnit('length')]]</div>
</div>
@ -117,20 +117,20 @@ class MoreInfoWeather extends LocalizeMixin(PolymerElement) {
'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'N'
];
this.weatherIcons = {
'clear-night': 'mdi:weather-night',
cloudy: 'mdi:weather-cloudy',
fog: 'mdi:weather-fog',
hail: 'mdi:weather-hail',
'clear-night': 'hass:weather-night',
cloudy: 'hass:weather-cloudy',
fog: 'hass:weather-fog',
hail: 'hass:weather-hail',
lightning: 'mid:weather-lightning',
'lightning-rainy': 'mdi:weather-lightning-rainy',
partlycloudy: 'mdi:weather-partlycloudy',
pouring: 'mdi:weather-pouring',
rainy: 'mdi:weather-rainy',
snowy: 'mdi:weather-snowy',
'snowy-rainy': 'mdi:weather-snowy-rainy',
sunny: 'mdi:weather-sunny',
windy: 'mdi:weather-windy',
'windy-variant': 'mdi:weather-windy-variant'
'lightning-rainy': 'hass:weather-lightning-rainy',
partlycloudy: 'hass:weather-partlycloudy',
pouring: 'hass:weather-pouring',
rainy: 'hass:weather-rainy',
snowy: 'hass:weather-snowy',
'snowy-rainy': 'hass:weather-snowy-rainy',
sunny: 'hass:weather-sunny',
windy: 'hass:weather-windy',
'windy-variant': 'hass:weather-windy-variant'
};
}

4
src/dialogs/more-info/more-info-controls.js
View File

@ -62,10 +62,10 @@ import EventsMixin from '../../mixins/events-mixin.js';
</style>
<app-toolbar>
<paper-icon-button icon="mdi:close" dialog-dismiss=""></paper-icon-button>
<paper-icon-button icon="hass:close" dialog-dismiss=""></paper-icon-button>
<div class="main-title" main-title="" on-click="enlarge">[[_computeStateName(stateObj)]]</div>
<template is="dom-if" if="[[canConfigure]]">
<paper-icon-button icon="mdi:settings" on-click="_gotoSettings"></paper-icon-button>
<paper-icon-button icon="hass:settings" on-click="_gotoSettings"></paper-icon-button>
</template>
</app-toolbar>

2
src/dialogs/more-info/more-info-settings.js
View File

@ -40,7 +40,7 @@ class MoreInfoSettings extends EventsMixin(PolymerElement) {
</style>
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[_computeStateName(stateObj)]]</div>
<paper-button on-click="_save">Save</paper-button>
</app-toolbar>

1
src/entrypoints/hass-icons.js Normal file
View File

@ -0,0 +1 @@
import '../resources/hass-icons.js';

2
src/layouts/hass-subpage.js
View File

@ -12,7 +12,7 @@ class HassSubpage extends PolymerElement {
<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[header]]</div>
</app-toolbar>
</app-header>

4
src/panels/config/automation/ha-automation-editor.js
View File

@ -102,7 +102,7 @@ class HaAutomationEditor extends
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="backTapped"></paper-icon-button>
<div main-title="">[[name]]</div>
</app-toolbar>
</app-header>
@ -113,7 +113,7 @@ class HaAutomationEditor extends
</template>
<div id="root"></div>
</div>
<paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="mdi:content-save" title="[[localize('ui.panel.config.automation.editor.save')]]" on-click="saveAutomation"></paper-fab>
<paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="hass:content-save" title="[[localize('ui.panel.config.automation.editor.save')]]" on-click="saveAutomation"></paper-fab>
</ha-app-layout>
`;
}

6
src/panels/config/automation/ha-automation-picker.js
View File

@ -57,7 +57,7 @@ class HaAutomationPicker extends
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[localize('ui.panel.config.automation.caption')]]</div>
</app-toolbar>
</app-header>
@ -80,13 +80,13 @@ class HaAutomationPicker extends
<div>[[computeName(automation)]]</div>
<div secondary="">[[computeDescription(automation)]]</div>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</template>
</paper-card>
</ha-config-section>
<paper-fab slot="fab" is-wide\$="[[isWide]]" icon="mdi:plus" title="[[localize('ui.panel.config.automation.picker.add_automation')]]" on-click="addAutomation"></paper-fab>
<paper-fab slot="fab" is-wide\$="[[isWide]]" icon="hass:plus" title="[[localize('ui.panel.config.automation.picker.add_automation')]]" on-click="addAutomation"></paper-fab>
</ha-app-layout>
`;
}

4
src/panels/config/cloud/ha-config-cloud-login.js
View File

@ -77,7 +77,7 @@ class HaConfigCloudLogin extends
<paper-card hidden\$="[[!flashMessage]]">
<div class="card-content flash-msg">
[[flashMessage]]
<paper-icon-button icon="mdi:close" on-click="_dismissFlash">Dismiss</paper-icon-button>
<paper-icon-button icon="hass:close" on-click="_dismissFlash">Dismiss</paper-icon-button>
<paper-ripple id="flashRipple" noink=""></paper-ripple>
</div>
</paper-card>
@ -101,7 +101,7 @@ class HaConfigCloudLogin extends
Create Account
<div secondary="">Get up and running quickly.</div>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</paper-card>
</ha-config-section>

2
src/panels/config/core/ha-config-core.js
View File

@ -40,7 +40,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[localize('ui.panel.config.core.caption')]]</div>
</app-toolbar>
</app-header>

2
src/panels/config/customize/ha-config-customize.js
View File

@ -28,7 +28,7 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[localize('ui.panel.config.customize.caption')]]</div>
</app-toolbar>
</app-header>

2
src/panels/config/customize/ha-customize-attribute.js
View File

@ -51,7 +51,7 @@ class HaCustomizeAttribute extends PolymerElement {
}
getIcon(secondary) {
return secondary ? 'mdi:pencil' : 'mdi:close';
return secondary ? 'hass:pencil' : 'hass:close';
}
itemObserver(item) {

2
src/panels/config/customize/types/ha-customize-icon.js
View File

@ -18,7 +18,7 @@ class HaCustomizeIcon extends PolymerElement {
}
</style>
<iron-icon class="icon-image" icon="[[item.value]]"></iron-icon>
<paper-input auto-validate="" pattern="(mdi:.*)?" error-message="Must start with 'mdi:'" disabled="[[item.secondary]]" label="icon" value="{{item.value}}">
<paper-input auto-validate="" pattern="(hass:.*)?" error-message="Must start with 'hass:'" disabled="[[item.secondary]]" label="icon" value="{{item.value}}">
</paper-input>
`;
}

2
src/panels/config/dashboard/ha-config-cloud-menu.js
View File

@ -32,7 +32,7 @@ class HaConfigCloudMenu extends NavigateMixin(PolymerElement) {
<div secondary="">Not logged in</div>
</template>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</paper-card>
`;

2
src/panels/config/dashboard/ha-config-entries-menu.js
View File

@ -27,7 +27,7 @@ class HaConfigEntriesMenu extends NavigateMixin(PolymerElement) {
Integrations
<div secondary="">EXPERIMENTAL – Manage connected devices and services</div>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</paper-card>
`;

2
src/panels/config/dashboard/ha-config-navigation.js
View File

@ -40,7 +40,7 @@ import isComponentLoaded from '../../../common/config/is_component_loaded.js';
[[_computeCaption(item, localize)]]
<div secondary="">[[_computeDescription(item, localize)]]</div>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</template>
</template>

2
src/panels/config/js/condition/condition_row.js
View File

@ -27,7 +27,7 @@ export default class ConditionRow extends Component {
vertical-offset="-5"
>
<paper-icon-button
icon="mdi:dots-vertical"
icon="hass:dots-vertical"
slot="dropdown-trigger"
/>
<paper-listbox slot="dropdown-content">

2
src/panels/config/js/script/action_row.js
View File

@ -27,7 +27,7 @@ export default class Action extends Component {
vertical-offset="-5"
>
<paper-icon-button
icon="mdi:dots-vertical"
icon="hass:dots-vertical"
slot="dropdown-trigger"
/>
<paper-listbox slot="dropdown-content">

2
src/panels/config/js/trigger/trigger_row.js
View File

@ -27,7 +27,7 @@ export default class TriggerRow extends Component {
vertical-offset="-5"
>
<paper-icon-button
icon="mdi:dots-vertical"
icon="hass:dots-vertical"
slot="dropdown-trigger"
/>
<paper-listbox slot="dropdown-content">

4
src/panels/config/script/ha-script-editor.js
View File

@ -100,7 +100,7 @@ class HaScriptEditor extends
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="backTapped"></paper-icon-button>
<div main-title="">Script [[name]]</div>
</app-toolbar>
</app-header>
@ -110,7 +110,7 @@ class HaScriptEditor extends
</template>
<div id="root"></div>
</div>
<paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="mdi:content-save" title="Save" on-click="saveScript"></paper-fab>
<paper-fab slot="fab" is-wide\$="[[isWide]]" dirty\$="[[dirty]]" icon="hass:content-save" title="Save" on-click="saveScript"></paper-fab>
</ha-app-layout>
`;
}

6
src/panels/config/script/ha-script-picker.js
View File

@ -52,7 +52,7 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[localize('ui.panel.config.script.caption')]]</div>
</app-toolbar>
</app-header>
@ -76,13 +76,13 @@ class HaScriptPicker extends LocalizeMixin(NavigateMixin(PolymerElement)) {
<div>[[computeName(script)]]</div>
<div secondary="">[[computeDescription(script)]]</div>
</paper-item-body>
<iron-icon icon="mdi:chevron-right"></iron-icon>
<iron-icon icon="hass:chevron-right"></iron-icon>
</paper-item>
</template>
</paper-card>
</ha-config-section>
<paper-fab slot="fab" is-wide\$="[[isWide]]" icon="mdi:plus" title="Add Script" on-click="addScript"></paper-fab>
<paper-fab slot="fab" is-wide\$="[[isWide]]" icon="hass:plus" title="Add Script" on-click="addScript"></paper-fab>
</ha-app-layout>
`;
}

4
src/panels/config/zwave/ha-config-zwave.js
View File

@ -83,7 +83,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
<ha-app-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<paper-icon-button icon="mdi:arrow-left" on-click="_backTapped"></paper-icon-button>
<paper-icon-button icon="hass:arrow-left" on-click="_backTapped"></paper-icon-button>
<div main-title="">[[localize('ui.panel.config.zwave.caption')]]</div>
</app-toolbar>
</app-header>
@ -94,7 +94,7 @@ class HaConfigZwave extends LocalizeMixin(PolymerElement) {
<ha-config-section is-wide="[[isWide]]">
<div style="position: relative" slot="header">
<span>Z-Wave Node Management</span>
<paper-icon-button class="toggle-help-icon" on-click="toggleHelp" icon="mdi:help-circle"></paper-icon-button>
<paper-icon-button class="toggle-help-icon" on-click="toggleHelp" icon="hass:help-circle"></paper-icon-button>
</div>
<span slot="introduction">

2
src/panels/config/zwave/zwave-network.js
View File

@ -45,7 +45,7 @@ class ZwaveNetwork extends PolymerElement {
<ha-config-section is-wide="[[isWide]]">
<div style="position: relative" slot="header">
<span>Z-Wave Network Management</span>
<paper-icon-button class="toggle-help-icon" on-click="helpTap" icon="mdi:help-circle"></paper-icon-button>
<paper-icon-button class="toggle-help-icon" on-click="helpTap" icon="hass:help-circle"></paper-icon-button>
</div>
<span slot="introduction">

2
src/panels/dev-info/ha-panel-dev-info.js
View File

@ -198,7 +198,7 @@ class HaPanelDevInfo extends PolymerElement {
</div>
<p class='error-log-intro'>
Press the button to load the full Home Assistant log.
<paper-icon-button icon='mdi:refresh' on-click='refreshErrorLog'></paper-icon-button>
<paper-icon-button icon='hass:refresh' on-click='refreshErrorLog'></paper-icon-button>
</p>
<div class='error-log'>[[errorLog]]</div>
</div>

2
src/panels/dev-state/ha-panel-dev-state.js
View File

@ -121,7 +121,7 @@ class HaPanelDevState extends EventsMixin(PolymerElement) {
<td>
<paper-icon-button
on-click='entityMoreInfo'
icon='mdi:open-in-new'
icon='hass:open-in-new'
alt="More Info" title="More Info"
>
</paper-icon-button>

2
src/panels/logbook/ha-panel-logbook.js
View File

@ -61,7 +61,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
<ha-menu-button narrow='[[narrow]]' show-menu='[[showMenu]]'></ha-menu-button>
<div main-title>[[localize('panel.logbook')]]</div>
<paper-icon-button
icon='mdi:refresh'
icon='hass:refresh'
on-click='refreshLogbook'
hidden$='[[isLoading]]'
></paper-icon-button>

2
src/panels/mailbox/ha-panel-mailbox.js
View File

@ -134,7 +134,7 @@ class HaPanelMailbox extends LocalizeMixin(PolymerElement) {
[[localize('ui.panel.mailbox.playback_title')]]
<paper-icon-button
on-click='openDeleteDialog'
icon='mdi:delete'
icon='hass:delete'
></paper-icon-button>
</h2>
<div id="transcribe"></div>

2
src/panels/map/ha-entity-marker.js
View File

@ -1,9 +1,7 @@
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-image/iron-image.js';
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import EventsMixin from '../../mixins/events-mixin.js';
/*

4
src/panels/shopping-list/ha-panel-shopping-list.js
View File

@ -79,7 +79,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
vertical-offset="-5"
>
<paper-icon-button
icon="mdi:dots-vertical"
icon="hass:dots-vertical"
slot="dropdown-trigger"
></paper-icon-button>
<paper-listbox slot="dropdown-content">
@ -96,7 +96,7 @@ class HaPanelShoppingList extends LocalizeMixin(PolymerElement) {
<paper-icon-item on-focus='_focusRowInput'>
<paper-icon-button
slot="item-icon"
icon="mdi:plus"
icon="hass:plus"
on-click='_addItem'
></paper-icon-button>
<paper-item-body>

6
src/resources/hass-icons.js Normal file
View File

@ -0,0 +1,6 @@
import iconSetContent from '../../build/hass-icons.html';
const documentContainer = document.createElement('template');
documentContainer.setAttribute('style', 'display: none;');
documentContainer.innerHTML = iconSetContent;
document.head.appendChild(documentContainer.content);

0
src/entrypoints/mdi.js → src/resources/mdi-icons.js
View File

2
webpack.config.js
View File

@ -64,7 +64,7 @@ function createConfig(isProdBuild, latestBuild) {
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js')
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/leaflet.css', to: `images/leaflet/` });
copyPluginOpts.push({ from: 'node_modules/leaflet/dist/images', to: `images/leaflet/` });
entry.mdi = './src/entrypoints/mdi.js';
entry['hass-icons'] = './src/entrypoints/hass-icons.js';
} else {
copyPluginOpts.push('node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js');
babelOptions.presets = [