material design icons is added

package-lock.json

@@ -10737,6 +10737,12 @@
         "isobject": "^3.0.1"
       }
     },
+    "observable-profiler": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/observable-profiler/-/observable-profiler-0.1.1.tgz",
+      "integrity": "sha512-MhUzV7CqrnlKn69Okqx7IIH2nnKl+ZYAEekD4tnwAOTePtbQwR5+TLnHsHLl5zcYanMRDw9ff36vlRmv04fF7Q==",
+      "dev": true
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.html

@@ -13,29 +13,43 @@
       <mat-tab-group flex="1" vertical animationDuration="0ms">
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-settings"></span>
-            asdkfsdkfs
+            일반
           </ng-template>
           하나
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
-            <mat-icon>group</mat-icon>
+            <span class="mdi mdi-lock"></span>
-            asdkfsdkfs
+            개인정보취급방침
           </ng-template>
           둘
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>group</mat-icon>
-            asdkfsdkfs
+            알림
           </ng-template>
           셋
         </mat-tab>
         <mat-tab>
           <ng-template mat-tab-label>
             <mat-icon>group</mat-icon>
-            asdkfsdkfs
+            장치
+          </ng-template>
+          넷
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            사용권한
+          </ng-template>
+          넷
+        </mat-tab>
+        <mat-tab>
+          <ng-template mat-tab-label>
+            <mat-icon>group</mat-icon>
+            통화
           </ng-template>
           넷
         </mat-tab>

projects/ucap-webmessenger-app/src/app/store/messenger/settings/effects.ts

@@ -29,7 +29,9 @@ export class Effects {
             MessengerSettingsDialogResult
           >(MessengerSettingsDialogComponent, {
             width: '800px',
+            maxWidth: '800px',
             height: '800px',
+            minHeight: '800px',
             disableClose: false,
             data: {}
           });

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_animated.scss

@@ -0,0 +1,27 @@
+// From Font Awesome
+.#{$mdi-css-prefix}-spin:before {
+  -webkit-animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+  animation: #{$mdi-css-prefix}-spin 2s infinite linear;
+}
+
+@-webkit-keyframes #{$mdi-css-prefix}-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+@keyframes #{$mdi-css-prefix}-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_core.scss

@@ -0,0 +1,10 @@
+.#{$mdi-css-prefix}:before,
+.#{$mdi-css-prefix}-set {
+  display: inline-block;
+  font: normal normal normal #{$mdi-font-size-base}/ 1 '#{$mdi-font-name}'; // shortening font declaration
+  font-size: inherit; // can't have font-size inherit on line above, so need to override
+  text-rendering: auto; // optimizelegibility throws things off #1094
+  line-height: inherit;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_extras.scss

@@ -0,0 +1,65 @@
+$mdi-sizes: 18 24 36 48;
+@each $mdi-size in $mdi-sizes {
+  .#{$mdi-css-prefix}-#{$mdi-size}px {
+    &.#{$mdi-css-prefix}-set,
+    &.#{$mdi-css-prefix}:before {
+      font-size: $mdi-size * 1px;
+    }
+  }
+}
+
+.#{$mdi-css-prefix}-dark {
+  &:before {
+    color: rgba(0, 0, 0, 0.54);
+  }
+  &.#{$mdi-css-prefix}-inactive:before {
+    color: rgba(0, 0, 0, 0.26);
+  }
+}
+.#{$mdi-css-prefix}-light {
+  &:before {
+    color: rgba(255, 255, 255, 1);
+  }
+  &.#{$mdi-css-prefix}-inactive:before {
+    color: rgba(255, 255, 255, 0.3);
+  }
+}
+
+$mdi-degrees: 45 90 135 180 225 270 315;
+@each $mdi-degree in $mdi-degrees {
+  .#{$mdi-css-prefix}-rotate-#{$mdi-degree} {
+    &:before {
+      -webkit-transform: rotate(#{$mdi-degree}deg);
+      -ms-transform: rotate(#{$mdi-degree}deg);
+      transform: rotate(#{$mdi-degree}deg);
+    }
+    /*
+        // Not included in production
+        &.#{$mdi-css-prefix}-flip-h:before {
+            -webkit-transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            transform: scaleX(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipH;
+            -ms-filter: "FlipH";
+        }
+        &.#{$mdi-css-prefix}-flip-v:before {
+            -webkit-transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            -ms-transform: rotate(#{$mdi-degree}deg);
+            transform: scaleY(-1) rotate(#{$mdi-degree}deg);
+            filter: FlipV;
+            -ms-filter: "FlipV";
+        }
+        */
+  }
+}
+.#{$mdi-css-prefix}-flip-h:before {
+  -webkit-transform: scaleX(-1);
+  transform: scaleX(-1);
+  filter: FlipH;
+  -ms-filter: 'FlipH';
+}
+.#{$mdi-css-prefix}-flip-v:before {
+  -webkit-transform: scaleY(-1);
+  transform: scaleY(-1);
+  filter: FlipV;
+  -ms-filter: 'FlipV';
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_functions.scss

@@ -0,0 +1,19 @@
+@function char($character-code) {
+  @if function-exists('selector-append') {
+    @return unquote('"\\#{$character-code}"');
+  }
+
+  @if "\\#{'x'}"== '\\x' {
+    @return str-slice('\x', 1, 1) + $character-code;
+  } @else {
+    @return #{'"\\'}#{$character-code + '"'};
+  }
+}
+
+@function mdi($name) {
+  @if map-has-key($mdi-icons, $name) == false {
+    @warn "Icon #{$name} not found.";
+    @return '';
+  }
+  @return char(map-get($mdi-icons, $name));
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_icons.scss

@@ -0,0 +1,10 @@
+@each $key, $value in $mdi-icons {
+  .#{$mdi-css-prefix}-#{$key}::before {
+    content: char($value);
+  }
+}
+
+.#{$mdi-css-prefix}-blank::before {
+  content: '\F68C';
+  visibility: hidden;
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/_path.scss

@@ -0,0 +1,14 @@
+@font-face {
+  font-family: '#{$mdi-font-name}';
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?v=#{$mdi-version}');
+  src: url('#{$mdi-font-path}/#{$mdi-filename}-webfont.eot?#iefix&v=#{$mdi-version}')
+      format('embedded-opentype'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff2?v=#{$mdi-version}')
+      format('woff2'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.woff?v=#{$mdi-version}')
+      format('woff'),
+    url('#{$mdi-font-path}/#{$mdi-filename}-webfont.ttf?v=#{$mdi-version}')
+      format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}

projects/ucap-webmessenger-app/src/assets/fonts/materialdesignicons/scss/materialdesignicons.scss

@@ -0,0 +1,8 @@
+/* MaterialDesignIcons.com */
+@import 'variables';
+@import 'functions';
+@import 'path';
+@import 'core';
+@import 'icons';
+@import 'extras';
+@import 'animated';

projects/ucap-webmessenger-app/src/styles.scss

@@ -1,5 +1,7 @@
 @import '~perfect-scrollbar/css/perfect-scrollbar.css';
 
+@import 'assets/fonts/materialdesignicons/scss/materialdesignicons';
+
 @import '~@ucap-webmessenger-scss/ui/ucap-ui';
 
 @import 'assets/scss/ucap';