Ensure contact icon is displayed if no initials

Author: nmetulev

src/components/mgt-person/mgt-person.scss

@@ -74,18 +74,24 @@ mgt-person .user-avatar {
     border-radius: 50%;
     font-weight: 400;
 
-    & .initials-text {
+    & .initials-text,
+    & .ms-Icon {
       cursor: default;
       margin-top: -1px;
       font-size: calc(var(--avatar-size, 48px) * 0.4);
     }
+
+    & .ms-Icon {
+      display: inline;
+    }
   }
 
   &.small {
     width: $avatar-size-s;
     height: $avatar-size-s;
 
-    & .initials-text {
+    & .initials-text,
+    & .ms-Icon {
       font-size: calc(var(--avatar-size-s, 24px) * 0.4);
     }
   }

src/components/mgt-person/mgt-person.ts

@@ -312,6 +312,7 @@ export class MgtPerson extends MgtTemplatedComponent {
       this.personDetails && this.personCardInteraction === PersonCardInteraction.none
         ? this.personDetails.displayName
         : '';
+
     const isLarge = this.showEmail && this.showName;
     const imageClasses = {
       initials: !imageSrc,
@@ -321,19 +322,31 @@ export class MgtPerson extends MgtTemplatedComponent {
     };
 
     let imageHtml: TemplateResult;
+
     if (imageSrc) {
       // render the image
       imageHtml = html`
         <img alt=${title} src=${imageSrc} />
       `;
     } else if (this.personDetails) {
-      // render the initials
-      const initials = this.getInitials(this.personDetails);
+      // render the initials or person icon
+
       // add avatar background color
       imageClasses[this._personAvatarBg] = true;
+
+      const initials = this.getInitials(this.personDetails);
+      const initialsHtml =
+        initials && initials.length
+          ? html`
+              ${initials}
+            `
+          : html`
+              <i class="ms-Icon ms-Icon--Contact"></i>
+            `;
+
       imageHtml = html`
         <span class="initials-text" aria-label="${initials}">
-          ${initials}
+          ${initialsHtml}
         </span>
       `;
     } else {