diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
index 95d6278d..5e32753b 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.html
@@ -1,6 +1,9 @@
 <div class="bubble-main">
   <!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
-  <div class="file-img" [ngClass]="fileInfo.FileExt"></div>
+  <!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
+  <div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.FileExt]">
+    <div class="ico"></div>
+  </div>
   <ul class="file-info">
     <li class="file-name">
       {{ fileInfo.FileName }}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
index 2b3443a2..747a0e6f 100644
--- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss
@@ -15,3 +15,5 @@
 @import 'partials/presence.scss';
 @import 'partials/list-item';
 @import 'partials/dialogs';
+
+@import 'file-icon/icons';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_fonts.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_fonts.scss
new file mode 100644
index 00000000..555ba22f
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_fonts.scss
@@ -0,0 +1,27 @@
+//
+// Import icons
+//
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
+    format('woff2');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+  line-height: 1;
+  letter-spacing: normal;
+  text-transform: none;
+  display: inline-block;
+  white-space: nowrap;
+  word-wrap: normal;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_functions.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_functions.scss
new file mode 100644
index 00000000..aebfb456
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_functions.scss
@@ -0,0 +1,14 @@
+@function colorEncode($color) {
+  @if (
+    str-index(ie-hex-str($color), '#') ==
+      1 and
+      str-length(ie-hex-str($color)) ==
+      9 and
+      type-of($color) ==
+      'color'
+  ) {
+    @return '%23' + str-slice(ie-hex-str($color), 4, 9);
+  }
+
+  @return $color;
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-colors.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-colors.scss
new file mode 100644
index 00000000..0ce098ae
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-colors.scss
@@ -0,0 +1,5 @@
+//
+// Colors (used when another color isn't specified)
+//
+$icon-colours: #b1375e, #db4f42, #f29b00, #bfcb3e, #8db157, #50abb5, #5277de,
+  #6963c5;
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-vars.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-vars.scss
new file mode 100644
index 00000000..7718b6be
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_generator-vars.scss
@@ -0,0 +1,41 @@
+//
+// Icons (the corrispong ascii)
+//
+
+$settings: '\E8B8';
+$locked: '\E88D';
+$flag: '\E3A0';
+$work: '\E8F9';
+$build: '\E869';
+$malware: '\E868';
+$map: '\E8B4';
+$coffee: '\EB44';
+$apk: '\E859';
+$usb: '\E1E0';
+$cloud: '\E2BD';
+$attachment: '\E2BC';
+$world: '\E80B';
+
+$zip: '\E3E7';
+
+$music: '\E3A1';
+$mic: '\E029';
+$radio: '\E03E';
+$audio: '\E050';
+$lp: '\E019';
+
+$photo: '\E3B0';
+$picture: '\E3B7';
+$pict: '\E251';
+
+$play: '\E037';
+$movie: '\E02C';
+$cam: '\E04B';
+
+$text: '\E262';
+$stylez: '\E91D';
+$app: '\E051';
+$code: '\E86F';
+
+$calendar: '\E8DF';
+$epub: '\E54B';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_hardcoded.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_hardcoded.scss
new file mode 100644
index 00000000..20e45097
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_hardcoded.scss
@@ -0,0 +1,150 @@
+// HARDCODED styles
+// This part serves for the demo and can be safely canceled
+// However, if you need a particular icon you can write the code like in the examples below
+//
+
+.mime-icon {
+  .ico.ico-magenta:after {
+    @include do-icon(#d9006c);
+  }
+  .ico.ico-yellow:after {
+    @include do-icon(#f9ca15);
+  }
+  .ico.ico-blue:after {
+    @include do-icon(#0d75dd);
+  }
+
+  &.abc .ico:after {
+    @include do-icon(desaturate(hsla(15, 90%, 55%, 1), 15%), '', 'ABC');
+  }
+  &.def .ico:after {
+    @include do-icon(desaturate(hsla(80, 75%, 47%, 1), 15%), '', 'DEF');
+  }
+  &.ghi .ico:after {
+    @include do-icon(desaturate(hsla(270, 60%, 55%, 1), 15%), '', 'GHI');
+  }
+
+  &.light {
+    &.ico-mp3 .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#05ad9d, 15%), 'MP3', #888, '');
+    }
+    &.ico-pcm .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#8bc34a, 15%), 'PCM', #888, '');
+    }
+    &.ico-ogg .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#cddc39, 15%), 'OGG', #888, '');
+    }
+    &.ico-wav .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#ffc107, 15%), 'WAV', #888, '');
+    }
+    &.ico-aac .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#f44336, 15%), 'AAC', #888, '');
+    }
+    &.ico-aiff .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#e91e63, 15%), 'AIFF', #888, '');
+    }
+    &.ico-wma .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'WMA', #888, '');
+    }
+    &.ico-html .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#3f51b5, 15%), 'HTML', #888, '');
+    }
+    &.ico-js .ico:after {
+      @include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'JS', #888, '');
+    }
+  }
+
+  &.dark {
+    &.ico-csv .ico:after {
+      @include do-icon($dark-color, desaturate(#05ad9d, 15%), 'CSV', #ddd, '');
+    }
+    &.ico-txt .ico:after {
+      @include do-icon($dark-color, desaturate(#8bc34a, 15%), 'TXT', #ddd, '');
+    }
+    &.ico-rtf .ico:after {
+      @include do-icon($dark-color, desaturate(#cddc39, 15%), 'RTF', #ddd, '');
+    }
+    &.ico-doc .ico:after {
+      @include do-icon($dark-color, desaturate(#ffc107, 15%), 'DOC', #ddd, '');
+    }
+    &.ico-docx .ico:after {
+      @include do-icon($dark-color, desaturate(#f44336, 15%), 'DOCX', #ddd, '');
+    }
+    &.ico-flac .ico:after {
+      @include do-icon($dark-color, desaturate(#e91e63, 15%), 'FLAC', #ddd, '');
+    }
+    &.ico-js .ico:after {
+      @include do-icon($dark-color, desaturate(#9c27b0, 15%), 'JS', #ddd, '');
+    }
+    &.ico-php .ico:after {
+      @include do-icon($dark-color, desaturate(#3f51b5, 15%), 'PHP', #ddd, '');
+    }
+  }
+
+  &.double {
+    &.ico-avi .ico {
+      &:before {
+        color: #f44336 !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #f44336, 'AVI', #f44336, '');
+      }
+    }
+    &.ico-mp4 .ico {
+      &:before {
+        color: #8bc34a !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #8bc34a, 'MP4', #8bc34a, '');
+      }
+    }
+    &.ico-mkv .ico {
+      &:before {
+        color: #bdcc2b !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #bdcc2b, 'MKV', #bdcc2b, '');
+      }
+    }
+    &.ico-mpeg .ico {
+      &:before {
+        color: #ffc107 !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #ffc107, 'MPEG', #ffc107, '');
+      }
+    }
+    &.ico-mov .ico {
+      &:before {
+        color: #05ad9d !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #05ad9d, 'MOV', #05ad9d, '');
+      }
+    }
+    &.ico-flv .ico {
+      &:before {
+        color: #e91e63 !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #e91e63, 'FLV', #e91e63, '');
+      }
+    }
+    &.ico-swf .ico {
+      &:before {
+        color: #9c27b0 !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #9c27b0, 'SWF', #9c27b0, '');
+      }
+    }
+    &.ico-wmv .ico {
+      &:before {
+        color: #8bc34a !important;
+      }
+      &:after {
+        @include do-icon($dark-color, #8bc34a, 'WMV', #8bc34a, '');
+      }
+    }
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss
new file mode 100644
index 00000000..f662f635
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_icons.scss
@@ -0,0 +1,246 @@
+// CONFIGURATION
+$icon-container-size: 70px; // the size of the icons
+$icon-edge-color: ''; // the default edge color of the icon
+$font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
+$font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
+
+// ATTENTION write hex in extended notation
+$shape-color: #f1f2f2; // the color of the shape inside the icon (if any)
+$shape-color-positive: #666666; // the color of the shape when the icon have a positive background (es. white)
+$dark-color: #3a3b3c; // background color of the icons in the dark theme (or the ribbon color in the "double" $style theme  )
+$icon-shadow: ''; // or "drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );" without quotes
+$font-color: $shape-color; // default
+
+// CHOOSE YOUR THEME
+//
+//
+$style: ''; // icon theme -> possible values: default || dark || light || double
+
+// Import hex color conversion function
+@import 'functions';
+
+// Import icons
+@import 'fonts';
+
+// Colors (used when another color isn't specified)
+@import 'generator-colors';
+
+// Icons (the corrispong ascii)
+@import 'generator-vars';
+
+// DO-ICON MIXIN
+@import 'mixin';
+
+// HARDCODED styles
+// This part serves for the demo and can be safely canceled
+// However, if you need a particular icon you can write the code like in the examples below
+//
+@import 'hardcoded';
+
+//
+// LOOP CONFIG
+// The loop will generate icons as in the configuration below
+//
+$icon-list: ('3dm', '', $world), ('3dmf', '', $world), ('7z', '', $zip),
+  ('a', '', $zip), ('aab', '', $app), ('aac', '', $mic), ('aam', '', $app),
+  ('aas', '', $app), ('abc', '', $text), ('acgi', '', $text), ('afl', '', $play),
+  ('ai', '', $app), ('aif', '', $music), ('aifc', '', $radio), ('aiff', '', $lp),
+  ('aim', '', $app), ('aip', '', $text), ('ani', '', $app), ('aos', '', $app),
+  ('aps', '', $app), ('arc', '', $app), ('arj', '', $app), ('art', '', $photo),
+  ('asf', '', $movie), ('asm', '', $text), ('asp', '', $code), ('asx', '', $app),
+  ('au', '', $mic), ('avi', '', $app), ('avs', '', $movie), ('bcpio', '', $app),
+  ('bin', '', $app), ('bm', '', $picture), ('bmp', '', $pict), ('boo', '', $app),
+  ('book', '', $app), ('boz', '', $app), ('bsh', '', $app), ('bz', '', $zip),
+  ('bz2', '', $app), ('c', '', $code), ('cat', '', $app), ('cc', '', $code),
+  ('ccad', '', $app), ('cco', '', $app), ('cdf', '', $app), ('cer', '', $app),
+  ('cha', '', $app), ('chat', '', $app), ('class', '', $app), ('com', '', $app),
+  ('conf', '', $text), ('cpio', '', $app), ('cpp', '', $text), ('cpt', '', $app),
+  ('crl', '', $app), ('crt', '', $app), ('csh', '', $app), ('css', '', $app),
+  ('csv', '', $text), ('cxx', '', $text), ('dcr', '', $app), ('deepv', '', $app),
+  ('def', '', $text), ('der', '', $app), ('dif', '', $cam), ('dir', '', $app),
+  ('dl', '', $play), ('doc', '', $app), ('docx', '', $text), ('dot', '', $app),
+  ('dp', '', $app), ('drw', '', $app), ('dump', '', $app), ('dv', '', $cam),
+  ('dvi', '', $app), ('dwf', '', $picture), ('dwg', '', $app), ('dxf', '', $app),
+  ('dxr', '', $app), ('el', '', $text), ('elc', '', $app), ('env', '', $app),
+  ('eps', '', $app), ('es', '', $app), ('etx', '', $text), ('evy', '', $app),
+  ('exe', '', $app), ('f', '', $text), ('f77', '', $text), ('f90', '', $text),
+  ('fdf', '', $app), ('fif', '', $app), ('flac', '', $lp), ('fli', '', $play),
+  ('flo', '', $photo), ('flv', '', $malware), ('flx', '', $text),
+  ('fmf', '', $cam), ('for', '', $text), ('fpx', '', $picture),
+  ('frl', '', $app), ('funk', '', $audio), ('g', '', $text), ('g3', '', $pict),
+  ('gif', '', $photo), ('gl', '', $play), ('gsd', '', $lp), ('gsm', '', $music),
+  ('gsp', '', $app), ('gss', '', $app), ('gtar', '', $app), ('gz', '', $app),
+  ('gzip', '', $app), ('h', '', $text), ('hdf', '', $app), ('help', '', $app),
+  ('hgl', '', $app), ('hh', '', $text), ('hlb', '', $text), ('hlp', '', $app),
+  ('hpg', '', $app), ('hpgl', '', $app), ('hqx', '', $app), ('hta', '', $app),
+  ('htc', '', $text), ('htm', '', $code), ('html', '', $code),
+  ('htmls', '', $code), ('htt', '', $code), ('htx', '', $code),
+  ('ice', '', $text), ('ico', '', $picture), ('idc', '', $text),
+  ('ief', '', $pict), ('iefs', '', $photo), ('iges', '', $app),
+  ('igs', '', $app), ('ima', '', $app), ('imap', '', $app), ('inf', '', $app),
+  ('ins', '', $app), ('ip', '', $app), ('isu', '', $cam), ('it', '', $mic),
+  ('iv', '', $app), ('ivr', '', $flag), ('ivy', '', $app), ('jam', '', $radio),
+  ('jav', '', $code), ('java', '', $code), ('jcm', '', $app),
+  ('jfif', '', $picture), ('jfif-tbnl', '', $pict), ('jpe', '', $photo),
+  ('jpeg', '', $picture), ('jpg', '', $pict), ('jps', '', $photo),
+  ('js', '', $malware), ('jut', '', $picture), ('kar', '', $audio),
+  ('ksh', '', $app), ('la', '', $lp), ('lam', '', $mic), ('latex', '', $app),
+  ('lha', '', $app), ('lhx', '', $app), ('list', '', $text), ('lma', '', $radio),
+  ('log', '', $text), ('lsp', '', $app), ('lst', '', $text), ('lsx', '', $text),
+  ('ltx', '', $app), ('lzh', '', $app), ('lzx', '', $app), ('m', '', $text),
+  ('m1v', '', $play), ('m2a', '', $lp), ('m2v', '', $movie), ('m3u', '', $music),
+  ('m4a', '', $audio), ('man', '', $app), ('map', '', $app), ('mar', '', $text),
+  ('mbd', '', $app), ('mcd', '', $app), ('mcf', '', $pict), ('mcp', '', $app),
+  ('me', '', $app), ('mht', '', $work), ('mhtml', '', $work), ('mid', '', $app),
+  ('midi', '', $app), ('mif', '', $app), ('mime', '', $work),
+  ('mjf', '', $radio), ('mjpg', '', $cam), ('mkv', '', $play), ('mm', '', $app),
+  ('mme', '', $app), ('mod', '', $audio), ('moov', '', $play),
+  ('mov', '', $movie), ('movie', '', $cam), ('mp2', '', $music),
+  ('mp3', '', $lp), ('mp4', '', $movie), ('mpa', '', $lp), ('mpc', '', $app),
+  ('mpe', '', $play), ('mpeg', '', $movie), ('mpg', '', $music),
+  ('mpga', '', $mic), ('mpp', '', $app), ('mpt', '', $app), ('mpv', '', $app),
+  ('mpx', '', $app), ('mrc', '', $app), ('ms', '', $app), ('mv', '', $play),
+  ('my', '', $radio), ('mzz', '', $app), ('nap', '', $photo),
+  ('naplps', '', $picture), ('nc', '', $app), ('ncm', '', $app),
+  ('nif', '', $pict), ('niff', '', $photo), ('nix', '', $app), ('nsc', '', $app),
+  ('nvd', '', $app), ('o', '', $app), ('oda', '', $app), ('ogg', '', $audio),
+  ('omc', '', $app), ('omcd', '', $app), ('omcr', '', $app), ('p', '', $text),
+  ('p10', '', $app), ('p12', '', $app), ('p7a', '', $app), ('p7c', '', $app),
+  ('p7m', '', $app), ('p7r', '', $app), ('p7s', '', $app), ('part', '', $app),
+  ('pas', '', $text), ('pbm', '', $picture), ('pcl', '', $app),
+  ('pcm', '', $radio), ('pct', '', $pict), ('pcx', '', $photo),
+  ('pdb', '', $coffee), ('pdf', '', $app), ('pfunk', '', $audio),
+  ('pgm', '', $picture), ('php', '', $code), ('pic', '', $pict),
+  ('pict', '', $photo), ('pkg', '', $app), ('pko', '', $app), ('pl', '', $code),
+  ('plx', '', $app), ('pm', '', $picture), ('pm4', '', $app), ('pm5', '', $app),
+  ('png', '', $pict), ('pnm', '', $app), ('pot', '', $app),
+  ('pov', '', $settings), ('ppa', '', $app), ('ppm', '', $photo),
+  ('pps', '', $app), ('ppt', '', $app), ('pptx', '', $app), ('ppz', '', $app),
+  ('pre', '', $app), ('prt', '', $app), ('ps', '', $app), ('psd', '', $app),
+  ('pvu', '', $lp), ('pwz', '', $app), ('py', '', $code), ('pyc', '', $app),
+  ('qcp', '', $music), ('qd3', '', $world), ('qd3d', '', $world),
+  ('qif', '', $picture), ('qt', '', $movie), ('qtc', '', $cam),
+  ('qti', '', $pict), ('qtif', '', $photo), ('ram', '', $lp), ('rar', '', $zip),
+  ('ras', '', $app), ('rast', '', $picture), ('rexx', '', $text),
+  ('rf', '', $pict), ('rgb', '', $photo), ('rm', '', $app), ('rmi', '', $mic),
+  ('rmm', '', $radio), ('rmp', '', $audio), ('rng', '', $app), ('rnx', '', $app),
+  ('roff', '', $app), ('rp', '', $picture), ('rpm', '', $music),
+  ('rt', '', $text), ('rtf', '', $app), ('rtx', '', $app), ('rv', '', $play),
+  ('s', '', $text), ('s3m', '', $mic), ('saveme', '', $app), ('sbk', '', $app),
+  ('scm', '', $app), ('sdml', '', $text), ('sdp', '', $app), ('sdr', '', $app),
+  ('sea', '', $app), ('set', '', $app), ('sgm', '', $text), ('sgml', '', $text),
+  ('sh', '', $app), ('shar', '', $app), ('shtml', '', $code),
+  ('sid', '', $radio), ('sit', '', $app), ('skd', '', $app), ('skm', '', $app),
+  ('skp', '', $app), ('skt', '', $app), ('sl', '', $app), ('smi', '', $app),
+  ('smil', '', $app), ('snd', '', $audio), ('sol', '', $app), ('spc', '', $app),
+  ('spl', '', $app), ('spr', '', $app), ('sprite', '', $app), ('src', '', $app),
+  ('ssi', '', $text), ('ssm', '', $app), ('sst', '', $app), ('step', '', $app),
+  ('stl', '', $app), ('stp', '', $app), ('sv4cpio', '', $app),
+  ('sv4crc', '', $app), ('svf', '', $pict), ('svr', '', $app), ('swf', '', $app),
+  ('t', '', $app), ('talk', '', $text), ('tar', '', $app), ('tbk', '', $app),
+  ('tcl', '', $app), ('tcsh', '', $text), ('tex', '', $app), ('texi', '', $app),
+  ('texinfo', '', $app), ('tgz', '', $app), ('tif', '', $photo),
+  ('tiff', '', $picture), ('tr', '', $app), ('tsi', '', $music),
+  ('tsp', '', $app), ('tsv', '', $text), ('turbot', '', $pict),
+  ('txt', '', $text), ('uil', '', $text), ('uni', '', $text),
+  ('unis', '', $text), ('unv', '', $app), ('uri', '', $text),
+  ('uris', '', $text), ('ustar', '', $app), ('uu', '', $app), ('uue', '', $text),
+  ('vcd', '', $app), ('vcs', '', $text), ('vda', '', $app), ('vdo', '', $cam),
+  ('vew', '', $app), ('viv', '', $play), ('vivo', '', $cam), ('vmd', '', $app),
+  ('vmf', '', $app), ('voc', '', $radio), ('vos', '', $movie), ('vox', '', $lp),
+  ('vqe', '', $music), ('vqf', '', $mic), ('vql', '', $radio),
+  ('vrml', '', $app), ('vrt', '', $world), ('vsd', '', $app), ('vst', '', $app),
+  ('vsw', '', $app), ('wav', '', $audio), ('wb1', '', $app),
+  ('wbmp', '', $photo), ('web', '', $app), ('wiz', '', $app), ('wk1', '', $app),
+  ('wma', '', $music), ('wmf', '', $app), ('wml', '', $app), ('wmlc', '', $app),
+  ('wmls', '', $app), ('wmlsc', '', $app), ('wmv', '', $play),
+  ('word', '', $app), ('wp', '', $app), ('wp5', '', $app), ('wp6', '', $app),
+  ('wpd', '', $app), ('wq1', '', $app), ('wri', '', $app), ('wrl', '', $app),
+  ('wrz', '', $app), ('wsc', '', $app), ('wsrc', '', $app), ('wtk', '', $app),
+  ('x-png', '', $picture), ('xbm', '', $pict), ('xdr', '', $cam),
+  ('xgz', '', $app), ('xif', '', $photo), ('xl', '', $app), ('xla', '', $app),
+  ('xlb', '', $app), ('xlc', '', $app), ('xld', '', $app), ('xlk', '', $app),
+  ('xll', '', $app), ('xlm', '', $app), ('xls', '', $app), ('xlt', '', $app),
+  ('xlv', '', $app), ('xlw', '', $app), ('xm', '', $lp), ('xml', '', $app),
+  ('xmz', '', $text), ('xpix', '', $app), ('xpm', '', $picture),
+  ('xsr', '', $play), ('xwd', '', $pict), ('xyz', '', $app), ('z', '', $zip),
+  ('zip', '', $zip), ('zoo', '', $app), ('zsh', '', $text);
+
+////// basic style
+//////
+
+.mime-icon {
+  margin: 0;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+
+  .ico {
+    position: relative;
+    text-align: center;
+
+    &:before {
+      position: absolute;
+      top: $icon-container-size / 2.7;
+      display: block;
+      width: 100%;
+      overflow: visible;
+      z-index: 9;
+      content: '';
+      font-family: 'Material Icons';
+      font-size: $icon-container-size / 4.2;
+      opacity: 0.8;
+    }
+
+    &:after {
+      width: $icon-container-size;
+      height: $icon-container-size;
+      display: inline-block;
+      content: '';
+
+      background-size: 80%;
+      background-position: center;
+      background-repeat: no-repeat;
+      @include do-icon();
+    }
+  }
+
+  &.light {
+    .ico:before {
+      color: $shape-color-positive !important;
+    }
+    .ico:after {
+      filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
+    }
+  }
+
+  &.dark {
+    .ico:before {
+      color: #f1f2f2 !important;
+    }
+    .ico:after {
+      filter: inherit;
+    }
+  }
+
+  &.double {
+    .ico:after {
+      filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
+    }
+  }
+
+  i.material-icons {
+    position: absolute;
+    top: 33%;
+    left: 0;
+    right: 0;
+    font-size: 28px;
+    color: $shape-color;
+    opacity: 0.8;
+  }
+}
+
+////// "Each" n°1 icon with Google font icon
+//////
+
+@import 'loop';
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_loop.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_loop.scss
new file mode 100644
index 00000000..93549c63
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_loop.scss
@@ -0,0 +1,78 @@
+////// "Each" loop with font icon
+//////
+//////
+$colors-number: length($icon-colours);
+$actual-icon-color: 1;
+
+@each $filetype, $icon-primary-color, $icon in $icon-list {
+  @if (type-of($icon-primary-color) != 'color' and ($icon-primary-color)) {
+    // if background isn't a color or is null
+
+    @if ($style == 'dark') {
+      $icon-edge-color: nth(
+        $icon-colours,
+        $actual-icon-color
+      ); // the color is a color from the $icon-colours array
+      $icon-primary-color: $dark-color;
+    } @else if ($style == 'light') {
+      $icon-edge-color: nth($icon-colours, $actual-icon-color);
+      $icon-primary-color: #f1f2f2;
+    } @else if ($style == 'double') {
+      $icon-primary-color: $dark-color;
+      $icon-edge-color: nth($icon-colours, $actual-icon-color);
+    } @else {
+      $icon-primary-color: nth($icon-colours, $actual-icon-color);
+      $icon-edge-color: '';
+    }
+
+    @if ($actual-icon-color < $colors-number) {
+      // Prepare the next color then increase the index counter
+      $actual-icon-color: $actual-icon-color + 1;
+    } @else {
+      $actual-icon-color: 1;
+    }
+  } @else {
+    // else  background is a color or isn't null
+
+    @if ($style == 'dark') {
+      $icon-edge-color: $icon-primary-color;
+      $icon-primary-color: $dark-color;
+    } @else if ($style == 'light') {
+      $icon-edge-color: $icon-primary-color;
+      $icon-primary-color: #f1f2f2;
+    } @else if ($style == 'double') {
+      $icon-edge-color: $icon-primary-color;
+      $icon-primary-color: $dark-color;
+    } @else {
+      $icon-primary-color: $icon-primary-color;
+      $icon-edge-color: '';
+    }
+  }
+
+  @if ($style == 'light') {
+    $font-color: $shape-color-positive;
+    $icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
+  } @else if ($style == 'double') {
+    $font-color: $icon-edge-color;
+    $icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
+  } @else {
+    $font-color: $shape-color;
+    $icon-shadow: inherit;
+  }
+
+  // APPLY STYLE
+  .mime-icon.ico-#{$filetype} .ico:before {
+    content: $icon;
+    color: $font-color;
+  }
+  .mime-icon.ico-#{$filetype} .ico:after {
+    @include do-icon(
+      $icon-primary-color,
+      $icon-edge-color,
+      str-slice(to-upper-case($filetype), 0, 5),
+      $font-color,
+      $icon
+    );
+    filter: #{$icon-shadow};
+  }
+}
diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_mixin.scss b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_mixin.scss
new file mode 100644
index 00000000..d586e778
--- /dev/null
+++ b/projects/ucap-webmessenger-ui/src/assets/scss/file-icon/_mixin.scss
@@ -0,0 +1,43 @@
+////// DO-ICON MIXIN USAGE
+/////
+///// -> do-icon($background-color, $edge-color, $text, $text-color, $icon, $shape-color);
+///// +> @include do-icon(#009688, lighten(#009688, 20%), "", "");
+///
+// $background-color: the background of the document image (A color is expected - REQUIRED)
+// $edge-color: the color of corner edge
+// $text: the type of mime type
+// $text-color: the color of the text containing file extension (A color is expected)
+// $icon: inject an icon inside the document model
+
+// IF WOU WANT CHANGE THE DEFAULT ICON
+// #{$background-color} -> the icon main color
+// #{$edge-color} 			-> the icon secondary color
+// #{$font-size} 				-> the size of the file extension text (exe, jpg, gif, etc)
+// #{$icon} 						-> the ascii code of the icon font
+// #{$text} 						-> the file extension variable
+
+@mixin do-icon(
+  $background-color: #888,
+  $edge-color: null,
+  $text: null,
+  $text-color: #f1f2f2,
+  $icon: null
+) {
+  @if (type-of($edge-color) != 'color') {
+    $edge-color: lighten($background-color, 15%);
+  }
+  @if (type-of($text-color) != 'color') {
+    $text-color: '#F1F2F2';
+  }
+  @if (type-of($text) != 'string') and ($text) {
+    $text: '@#!';
+  }
+
+  $background-color: colorEncode($background-color);
+  $text-color: colorEncode($text-color);
+  $edge-color: colorEncode($edge-color);
+
+  $ico: '<svg xmlns="http://www.w3.org/2000/svg" class="icon-model" viewBox="0 0 200 200">#{$icon} <path d="M171 192.4V58.2l-58.4 0V0H36.5C32.4 0 29 3.4 29 7.6h0v184.9h0c0 4.2 3.4 7.6 7.6 7.6h126.9C167.6 200 171 196.6 171 192.4z" fill="#{$background-color}"/><text class="icon-text" transform="translate(100 171)" width="120" height="50" font-family="#{$font-family}" font-size="#{$font-size}" style="fill:#{$text-color};font-weight:bold;text-anchor:middle;text-shadow:0">#{$text}</text><polygon points="112.6 0 171 58.3 112.6 58.3" fill="#{$edge-color}"/><polygon points="170.9 116.5 112.6 58.3 170.9 58.3" style="fill:%23010202;opacity:0.1"/></svg>';
+
+  background-image: url('data:image/svg+xml;utf8,#{$ico}');
+}