Rename ConverseIcon property to avoid type clash

src/plugins/profile/templates/profile.js

@@ -50,7 +50,7 @@ export default (el) => {
             <div class="d-flex xmpp-status">
                 <a class="change-status" title="${i18n_change_status}" data-toggle="modal" data-target="#changeStatusModal" @click=${el.showStatusChangeModal}>
                     <span class="${chat_status} w-100 align-self-center" data-value="${chat_status}">
-                    <converse-icon color="var(--${color})" style="margin-top: -0.1em" size="0.82em" class="${classes}"></converse-icon> ${status_message}</span>
+                    <converse-icon color="var(--${color})" css="margin-top: -0.1em" size="0.82em" class="${classes}"></converse-icon> ${status_message}</span>
                 </a>
             </div>
         </div>`

src/shared/components/icons.js

@@ -5,7 +5,6 @@
  *  https://github.com/obsidiansoft-io/fa-icons/blob/master/LICENSE
  * @license Mozilla Public License (MPLv2)
  */
-
 import { CustomElement } from './element.js';
 import { api } from '@converse/headless';
 import { html } from 'lit';
@@ -17,17 +16,17 @@ class ConverseIcon extends CustomElement {
 
     static get properties () {
         return {
-            color: String,
+            color: { type: String },
             class_name: { attribute: "class" },
-            style: String,
-            size: String
+            css: { type: String },
+            size: { type: String }
         };
     }
 
     constructor () {
         super();
         this.class_name = "";
-        this.style = "";
+        this.css = "";
         this.size = "";
         this.color = "";
     }
@@ -43,7 +42,7 @@ class ConverseIcon extends CustomElement {
             ${this.size ? `width: ${this.size};` : ''}
             ${this.size ? `height: ${this.size};` : ''}
             ${color ? `fill: ${color};` : ''}
-            ${this.style}
+            ${this.css}
         `;
     }