diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index 4d860b8bcd..a2f7802341 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -36,15 +36,15 @@
         <span class="mdl-layout-title">Languages</span>
         <nav class="mdl-navigation">
             <a class="mdl-navigation__link" (click)="changeLanguage('en')">
-                <span class="flag-icon flag-icon-gb"></span>
+                <span class="adf-flag-icon adf-flag-icon-gb"></span>
                 <label tabindex="0"> English</label>
             </a>
             <a class="mdl-navigation__link" (click)="changeLanguage('it')">
-                <span class="flag-icon flag-icon-it"></span>
+                <span class="adf-flag-icon adf-flag-icon-it"></span>
                 <label tabindex="0"> Italian</label>
             </a>
             <a class="mdl-navigation__link" (click)="changeLanguage('ru')">
-                <span class="flag-icon flag-icon-ru"></span>
+                <span class="adf-flag-icon adf-flag-icon-ru"></span>
                 <label tabindex="0"> Russian</label>
             </a>
         </nav>
diff --git a/demo-shell-ng2/app/vendor.ts b/demo-shell-ng2/app/vendor.ts
index fcca40422e..a2a878ef18 100644
--- a/demo-shell-ng2/app/vendor.ts
+++ b/demo-shell-ng2/app/vendor.ts
@@ -35,9 +35,6 @@ import 'ng2-alfresco-userinfo';
 require('script-loader!dialog-polyfill/dialog-polyfill');
 import 'dialog-polyfill/dialog-polyfill.css';
 
-// Flags
-import 'flag-icon-css/css/flag-icon.min.css';
-
 // Load the Angular Material 2 stylesheet
 import '@angular/material/prebuilt-themes/indigo-pink.css';
 
diff --git a/demo-shell-ng2/package-lock.json b/demo-shell-ng2/package-lock.json
index c2b2aa9150..1b87d97acf 100644
--- a/demo-shell-ng2/package-lock.json
+++ b/demo-shell-ng2/package-lock.json
@@ -1808,11 +1808,6 @@
         }
       }
     },
-    "flag-icon-css": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/flag-icon-css/-/flag-icon-css-2.3.0.tgz",
-      "integrity": "sha1-DiCpvfoCB+r1DJ7bigzo/izC5nY="
-    },
     "flatten": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index ed83f30712..e78c7a1265 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -71,7 +71,6 @@
     "core-js": "2.4.1",
     "dialog-polyfill": "^0.4.7",
     "element.scrollintoviewifneeded-polyfill": "^1.0.1",
-    "flag-icon-css": "2.3.0",
     "intl": "^1.2.5",
     "material-design-icons": "2.2.3",
     "material-design-lite": "1.2.1",
diff --git a/demo-shell-ng2/public/css/app.css b/demo-shell-ng2/public/css/app.css
index 7119266e91..14ec8fe808 100644
--- a/demo-shell-ng2/public/css/app.css
+++ b/demo-shell-ng2/public/css/app.css
@@ -62,3 +62,29 @@ body, html {
     border: 0px;
     cursor: pointer;
 }
+
+.adf-flag-icon-gb {
+    background-image: url(./flags/gb.svg);
+}
+
+.adf-flag-icon-it {
+    background-image: url(./flags/it.svg);
+}
+
+.adf-flag-icon-ru {
+    background-image: url(./flags/ru.svg);
+}
+
+.adf-flag-icon:before {
+    content: "\00a0";
+}
+
+.adf-flag-icon {
+    background-size: contain;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    position: relative;
+    display: inline-block;
+    width: 1.33333333em;
+    line-height: 1em;
+}
diff --git a/demo-shell-ng2/public/css/flags/gb.svg b/demo-shell-ng2/public/css/flags/gb.svg
new file mode 100644
index 0000000000..a331748371
--- /dev/null
+++ b/demo-shell-ng2/public/css/flags/gb.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
+    <g stroke-width="1pt">
+      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
+      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
+      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
+      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
+    </g>
+  </g>
+</svg>
diff --git a/demo-shell-ng2/public/css/flags/it.svg b/demo-shell-ng2/public/css/flags/it.svg
new file mode 100644
index 0000000000..eab92e6156
--- /dev/null
+++ b/demo-shell-ng2/public/css/flags/it.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v479.997H0z"/>
+    <path fill="#005700" d="M0 0h213.331v479.997H0z"/>
+    <path fill="#fc0000" d="M426.663 0h213.331v479.997H426.663z"/>
+  </g>
+</svg>
diff --git a/demo-shell-ng2/public/css/flags/ru.svg b/demo-shell-ng2/public/css/flags/ru.svg
new file mode 100644
index 0000000000..ea2e10b0c1
--- /dev/null
+++ b/demo-shell-ng2/public/css/flags/ru.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1">
+  <g fill-rule="evenodd" stroke-width="1pt">
+    <path fill="#fff" d="M0 0h640v480H0z"/>
+    <path fill="#01017e" d="M0 160.003h640V480H0z"/>
+    <path fill="#fe0101" d="M0 319.997h640V480H0z"/>
+  </g>
+</svg>