Add icons to device config dashboard (#14184)

* Add icons to device config dashboard

* Add `alt=""`

src/components/data-table/ha-data-table.ts

@@ -724,6 +724,11 @@ export class HaDataTable extends LitElement {
           width: 54px;
         }
 
+        .mdc-data-table__cell--icon img {
+          width: 24px;
+          height: 24px;
+        }
+
         .mdc-data-table__header-cell.mdc-data-table__header-cell--icon {
           text-align: center;
         }
@@ -740,6 +745,7 @@ export class HaDataTable extends LitElement {
         }
 
         .mdc-data-table__cell--icon:first-child ha-icon,
+        .mdc-data-table__cell--icon:first-child img,
         .mdc-data-table__cell--icon:first-child ha-state-icon,
         .mdc-data-table__cell--icon:first-child ha-svg-icon {
           margin-left: 8px;
@@ -748,7 +754,12 @@ export class HaDataTable extends LitElement {
         :host([dir="rtl"])
           .mdc-data-table__cell--icon:first-child
           ha-state-icon,
-        :host([dir="rtl"]) .mdc-data-table__cell--icon:first-child ha-svg-icon {
+        :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          ha-svg-icon
+          :host([dir="rtl"])
+          .mdc-data-table__cell--icon:first-child
+          img {
           margin-left: auto;
           margin-right: 8px;
         }

src/panels/config/devices/ha-config-devices-dashboard.ts

@@ -35,6 +35,7 @@ import { domainToName } from "../../../data/integration";
 import "../../../layouts/hass-tabs-subpage-data-table";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
+import { brandsUrl } from "../../../util/brands-url";
 import { configSections } from "../ha-panel-config";
 import "../integrations/ha-integration-overflow-menu";
 import { showZWaveJSAddNodeDialog } from "../integrations/integration-panels/zwave_js/show-dialog-zwave_js-add-node";
@@ -215,6 +216,9 @@ export class HaConfigDeviceDashboard extends LitElement {
           : this.hass.localize(
               "ui.panel.config.devices.data_table.no_integration"
             ),
+        domains: device.config_entries
+          .filter((entId) => entId in entryLookup)
+          .map((entId) => entryLookup[entId].domain),
         battery_entity: [
           this._batteryEntity(device.id, deviceEntityLookup),
           this._batteryChargingEntity(device.id, deviceEntityLookup),
@@ -235,37 +239,52 @@ export class HaConfigDeviceDashboard extends LitElement {
 
   private _columns = memoizeOne(
     (narrow: boolean, showDisabled: boolean): DataTableColumnContainer => {
-      const columns: DataTableColumnContainer = narrow
-        ? {
-            name: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.device"
-              ),
-              main: true,
-              sortable: true,
-              filterable: true,
-              direction: "asc",
-              grows: true,
-              template: (name, device: DataTableRowData) => html`
-                ${name}
-                <div class="secondary">
-                  ${device.area} | ${device.integration}
-                </div>
-              `,
-            },
-          }
-        : {
-            name: {
-              title: this.hass.localize(
-                "ui.panel.config.devices.data_table.device"
-              ),
-              main: true,
-              sortable: true,
-              filterable: true,
-              grows: true,
-              direction: "asc",
-            },
-          };
+      const columns: DataTableColumnContainer = {
+        icon: {
+          title: "",
+          type: "icon",
+          template: (_icon, device) =>
+            device.domains.length
+              ? html`<img
+                  alt=""
+                  referrerpolicy="no-referrer"
+                  src=${brandsUrl({
+                    domain: device.domains[0],
+                    type: "icon",
+                    darkOptimized: this.hass.themes?.darkMode,
+                  })}
+                />`
+              : "",
+        },
+      };
+
+      if (narrow) {
+        columns.name = {
+          title: this.hass.localize(
+            "ui.panel.config.devices.data_table.device"
+          ),
+          main: true,
+          sortable: true,
+          filterable: true,
+          direction: "asc",
+          grows: true,
+          template: (name, device: DataTableRowData) => html`
+            ${name}
+            <div class="secondary">${device.area} | ${device.integration}</div>
+          `,
+        };
+      } else {
+        columns.name = {
+          title: this.hass.localize(
+            "ui.panel.config.devices.data_table.device"
+          ),
+          main: true,
+          sortable: true,
+          filterable: true,
+          grows: true,
+          direction: "asc",
+        };
+      }
 
       columns.manufacturer = {
         title: this.hass.localize(

src/panels/config/script/ha-script-picker.ts

@@ -91,7 +91,7 @@ class HaScriptPicker extends LitElement {
         ),
         type: "icon",
         template: (_icon, script) =>
-          html` <ha-state-icon .state=${script}></ha-state-icon>`,
+          html`<ha-state-icon .state=${script}></ha-state-icon>`,
       },
       name: {
         title: this.hass.localize("ui.panel.config.script.picker.headers.name"),