feat: dynamic avatar font size

css/_avatar.scss

@@ -9,6 +9,23 @@
     object-fit: cover;
 }
 
+.avatar-foreign {
+    align-items: center;
+    bottom: 0;
+    display: flex;
+    font-size: 40pt;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.avatar-svg {
+    height: 100%;
+    width: 100%;
+}
+
 .defaultAvatar {
     opacity: 0.6
 }

react/features/base/avatar/components/web/StatelessAvatar.js

@@ -52,7 +52,20 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
                     className = { this._getAvatarClassName() }
                     id = { this.props.id }
                     style = { this._getAvatarStyle(this.props.color) }>
-                    { initials }
+                    <svg
+                        className = 'avatar-svg'
+                        viewBox = '0 0 100 100'
+                        xmlns = 'http://www.w3.org/2000/svg'
+                        xmlnsXlink = 'http://www.w3.org/1999/xlink'>
+                        <foreignObject
+                            height = '100%'
+                            width = '100%'>
+                            <span
+                                className = 'avatar-foreign'>
+                                { initials }
+                            </span>
+                        </foreignObject>
+                    </svg>
                 </div>
             );
         }