Use converse-icon instead of webfonts in heading dropdown

src/plugins/chatview/utils.js

@@ -12,9 +12,10 @@ export function clearHistory (jid) {
 export async function getHeadingDropdownItem (promise_or_data) {
     const data = await promise_or_data;
     return html`
-        <a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}"
-            ><i class="fa ${data.icon_class}"></i>${data.i18n_text}</a
-        >
+        <a href="#" class="dropdown-item ${data.a_class}" @click=${data.handler} title="${data.i18n_title}">
+            <converse-icon size="1em" color="var(--text-color-lighten-15-percent)" class="fa ${data.icon_class}"></converse-icon>
+            ${data.i18n_text}
+        </a>
     `;
 }
 

src/plugins/muc-views/tests/muc.js

@@ -486,9 +486,9 @@ describe("Groupchats", function () {
                 expect(u.isVisible(topic_el)).toBe(true);
 
                 const toggle = view.querySelector('.hide-topic');
-                expect(toggle.textContent).toBe('Hide topic');
+                expect(toggle.textContent.trim()).toBe('Hide topic');
                 toggle.click();
-                await u.waitUntil(() => view.querySelector('.hide-topic').textContent === 'Show topic');
+                await u.waitUntil(() => view.querySelector('.hide-topic').textContent.trim() === 'Show topic');
             }));
 
             it("will always be shown when it's new", mock.initConverse([], {}, async function (_converse) {
@@ -510,7 +510,7 @@ describe("Groupchats", function () {
                 expect(u.isVisible(topic_el)).toBe(true);
 
                 const toggle = view.querySelector('.hide-topic');
-                expect(toggle.textContent).toBe('Hide topic');
+                expect(toggle.textContent.trim()).toBe('Hide topic');
                 toggle.click();
                 await u.waitUntil(() => !u.isVisible(topic_el));