diff --git a/.prettierrc.json b/.prettierrc.json
index b4d1390..7ca3a28 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -9,6 +9,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "useTabs": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "useTabs": false
 }
diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
index 0df67f5..4ca7e12 100644
--- a/src/components/credential-service/d-credential-service.tsx
+++ b/src/components/credential-service/d-credential-service.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import 'material-symbols';
 
 @Component({
   tag: 'd-credential-service',
@@ -6,17 +7,17 @@ import { Component, Host, Prop, h } from '@stencil/core';
   shadow: true,
 })
 export class DCredentialService {
-  @Prop({ reflect: true }) name: string;
-  @Prop({ reflect: true }) issuer: string;
-  @Prop({ reflect: true }) logoSrc?: string;
-  @Prop({ reflect: true }) description?: string;
-  @Prop({ reflect: true }) href?: string;
+  @Prop() name: string;
+  @Prop() issuer: string;
+  @Prop() logoSrc?: string;
+  @Prop() description?: string;
+  @Prop() href?: string;
 
   render() {
     const content = (
       <div>
-        <d-avatar name={this.name} src={this.logoSrc} size="l"></d-avatar>
-        <div class="grow">
+        <d-avatar class="shrink-0" name={this.name} src={this.logoSrc} size="l"></d-avatar>
+        <div class="grow truncate">
           <span class="name">{this.name}</span>
           <span class="description">{this.description}</span>
           <span class="issuer">{this.issuer}</span>
diff --git a/src/global/app.ts b/src/global/app.ts
index 368d1b8..e69de29 100644
--- a/src/global/app.ts
+++ b/src/global/app.ts
@@ -1 +0,0 @@
-import '@ionic/core'
\ No newline at end of file
diff --git a/src/global/global.css b/src/global/global.css
index 5c80299..9bd2ab8 100644
--- a/src/global/global.css
+++ b/src/global/global.css
@@ -51,6 +51,20 @@
   }
 }
 
+.icon {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
 * {
   @apply text-on;
 }
diff --git a/stencil.config.ts b/stencil.config.ts
index bd91d4d..e4ffed7 100644
--- a/stencil.config.ts
+++ b/stencil.config.ts
@@ -2,6 +2,7 @@ import { Config } from '@stencil/core';
 import { sass } from '@stencil/sass';
 import tailwind, { PluginConfigOpts, setPluginConfigurationDefaults, tailwindGlobal, tailwindHMR } from 'stencil-tailwind-plugin';
 import tailwindConf from './tailwind.config';
+import copy from 'rollup-plugin-copy';
 
 const opts = {
   debug: false,
@@ -20,6 +21,13 @@ export const config: Config = {
     {
       type: 'dist',
       esmLoaderPath: '../loader',
+      copy: [
+        {
+          src: '**/*.woff2',
+          dest: 'assets',
+          warn: true,
+        }
+      ]
     },
     {
       type: 'dist-custom-elements',
@@ -35,10 +43,29 @@ export const config: Config = {
     {
       type: 'www',
       serviceWorker: null, // disable service workers
+      copy: [
+        {
+          src: '**/*.woff2',
+          dest: 'assets',
+          warn: true,
+        }
+      ]
     },
   ],
   testing: {
     browserHeadless: 'new',
   },
   plugins: [sass(), tailwindGlobal(), tailwind(), tailwindHMR()],
+  rollupPlugins: {
+    after: [
+      copy({
+        targets: [
+          {
+            src: 'src/**/*.{woff2}',
+            dest: 'dist/didroom-components/assets',
+          },
+        ],
+      }),
+    ]
+  }
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fd2a524..10a1755 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,6 +6,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ['"Gantari Variable"', 'sans-serif'],
+        icon: ['"Material Symbols Rounded"', 'sans-serif],
       },
       colors: {
         'surface': 'var(--surface)',