diff --git a/ng2-components/ng2-alfresco-social/index.ts b/ng2-components/ng2-alfresco-social/index.ts
index 3ece9287f0..ca5006550a 100644
--- a/ng2-components/ng2-alfresco-social/index.ts
+++ b/ng2-components/ng2-alfresco-social/index.ts
@@ -21,6 +21,7 @@ import { CoreModule } from 'ng2-alfresco-core';
 import { LikeComponent } from './src/components/like.component';
 import { RatingComponent } from './src/components/rating.component';
 import { RatingService } from './src/services/rating.service';
+import { MaterialModule } from './src/material.module';
 
 export * from './src/components/rating.component';
 export * from './src/components/like.component';
@@ -37,7 +38,8 @@ export const RATING_PROVIDERS: any[] = [
 
 @NgModule({
     imports: [
-        CoreModule
+        CoreModule,
+        MaterialModule
     ],
     declarations: [
         ...RATING_DIRECTIVES
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.css b/ng2-components/ng2-alfresco-social/src/components/like.component.css
deleted file mode 100644
index b6e3833506..0000000000
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.adf-like-container {
-    overflow: hidden;
-    width: 100%;
-}
-
-.adf-like {
-    padding: 5px;
-    cursor: pointer;
-    float: left;
-    margin: 5px 0px 5px 5px;
-}
-
-.adf-like-select {
-    cursor: pointer;
-    color: #2196f3;
-}
-
-.adf-like-select:hover {
-    cursor: pointer;
-    color: #808080;
-}
-
-.adf-like-grey {
-    cursor: pointer;
-    color: #808080;
-}
-
-.adf-like-grey:hover {
-    cursor: pointer;
-    color: #2196f3;
-}
-
-.adf-like-counter {
-    float: left;
-    padding: 13px 0 0 0;
-}
-
-.adf-left{
-    float: left;
-    padding: 13px 0 0 4px;
-}
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.html b/ng2-components/ng2-alfresco-social/src/components/like.component.html
index b9e462fcea..5effea860d 100644
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.html
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.html
@@ -1,8 +1,8 @@
 <div id="adf-like-container" class="adf-like-container">
-    <div class="material-icons adf-like">
+    <div class="adf-like">
         <span id="adf-like-{{nodeId}}" [ngClass]="{'adf-like-select': isLike ,'adf-like-grey': !isLike  }"
               (click)="likeClick()">
-            <i class="material-icons">thumb_up</i>
+            <md-icon>thumb_up</md-icon>
         </span>
     </div>
     <div id="adf-like-counter" class="adf-like-counter">{{likesCounter}}</div>
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.scss b/ng2-components/ng2-alfresco-social/src/components/like.component.scss
new file mode 100644
index 0000000000..be28b0a04f
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.scss
@@ -0,0 +1,42 @@
+.adf-like-container {
+    overflow: hidden;
+    width: 100%;
+
+    .adf-like {
+        padding: 5px;
+        cursor: pointer;
+        float: left;
+        margin: 5px 0px 5px 5px;
+    }
+
+    .adf-like-select {
+        cursor: pointer;
+        color: #2196f3;
+    }
+
+    .adf-like-select:hover {
+        cursor: pointer;
+        color: #808080;
+    }
+
+    .adf-like-grey {
+        cursor: pointer;
+        color: #808080;
+    }
+
+    .adf-like-grey:hover {
+        cursor: pointer;
+        color: #2196f3;
+    }
+
+    .adf-like-counter {
+        float: left;
+        padding: 13px 0 0 0;
+    }
+
+    .adf-left {
+        float: left;
+        padding: 13px 0 0 4px;
+    }
+
+}
diff --git a/ng2-components/ng2-alfresco-social/src/components/like.component.ts b/ng2-components/ng2-alfresco-social/src/components/like.component.ts
index 6bbfcb84dd..5c66e94fc2 100644
--- a/ng2-components/ng2-alfresco-social/src/components/like.component.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/like.component.ts
@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { RatingService } from './../services/rating.service';
 
 @Component({
     selector: 'adf-like',
-    styleUrls: ['./like.component.css'],
+    styleUrls: ['./like.component.scss'],
     templateUrl: './like.component.html',
-    providers: [RatingService]
+    providers: [RatingService],
+    encapsulation: ViewEncapsulation.None
 })
 export class LikeComponent implements OnChanges {
 
diff --git a/ng2-components/ng2-alfresco-social/src/components/rating.component.css b/ng2-components/ng2-alfresco-social/src/components/rating.component.css
deleted file mode 100644
index a240c62f75..0000000000
--- a/ng2-components/ng2-alfresco-social/src/components/rating.component.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.adf-rating-container {
-    overflow: hidden;
-    width: 100%;
-}
-
-.adf-rating-star {
-    float: left;
-    transition: all .3s;
-    padding: 1px;
-    cursor: pointer;
-}
-
-.adf-colored-star {
-    color: #ffe944;
-}
-
-.adf-grey-star {
-    color: #808080;
-}
-
-.adf-stars-container {
-    padding: 0!important;
-    margin: 0!important;
-    display: inline-block;
-}
-
-.adf-rating-star:hover {
-    transform: rotate(13deg) scale(1.2);
-}
-
diff --git a/ng2-components/ng2-alfresco-social/src/components/rating.component.html b/ng2-components/ng2-alfresco-social/src/components/rating.component.html
index f4e9df056f..be21e06683 100644
--- a/ng2-components/ng2-alfresco-social/src/components/rating.component.html
+++ b/ng2-components/ng2-alfresco-social/src/components/rating.component.html
@@ -1,10 +1,12 @@
-<div id="adf-rating-container" class="adf-rating-container">
-    <ul class="mdl-list adf-stars-container">
-        <li class="mdl-list__item adf-rating-star" *ngFor="let currentRate of stars; let idx = index">
-            <span id="adf-rate-{{idx}}" class="mdl-list__item-primary-content">
-                <i id="adf-grey-star-{{idx}}" *ngIf="currentRate.fill" class="material-icons adf-colored-star" (click)="updateVote(idx + 1)" >star_rate</i>
-                <i id="adf-colored-star-{{idx}}" *ngIf="!currentRate.fill" class="material-icons adf-grey-star" (click)="updateVote(idx + 1)" >star_border</i>
+<md-list id="adf-rating-container" class="adf-rating-container">
+    <md-list-item class="adf-rating-star" *ngFor="let currentRate of stars; let idx = index">
+            <span id="adf-rate-{{idx}}">
+                <md-icon id="adf-grey-star-{{idx}}" *ngIf="currentRate.fill" class="adf-colored-star"
+                         (click)="updateVote(idx + 1)">star_rate
+                </md-icon>
+                <md-icon id="adf-colored-star-{{idx}}" *ngIf="!currentRate.fill" class="adf-grey-star"
+                         (click)="updateVote(idx + 1)">star_border
+                </md-icon>
             </span>
-        </li>
-    </ul>
-</div>
+    </md-list-item>
+</md-list>
diff --git a/ng2-components/ng2-alfresco-social/src/components/rating.component.scss b/ng2-components/ng2-alfresco-social/src/components/rating.component.scss
new file mode 100644
index 0000000000..2b015ed19c
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/src/components/rating.component.scss
@@ -0,0 +1,34 @@
+.adf-rating-container {
+    overflow: hidden;
+    width: 100%;
+
+    .adf-rating-star {
+        float: left;
+        transition: all .3s;
+        padding: 1px;
+        cursor: pointer;
+
+        .mat-list-item-content {
+            padding: 0 2px !important;
+        }
+    }
+
+    .adf-colored-star {
+        color: #ffe944;
+    }
+
+    .adf-grey-star {
+        color: #808080;
+    }
+
+    .adf-stars-container {
+        padding: 0 !important;
+        margin: 0 !important;
+        display: inline-block;
+    }
+
+    .adf-rating-star:hover {
+        transform: rotate(13deg) scale(1.2);
+    }
+
+}
diff --git a/ng2-components/ng2-alfresco-social/src/components/rating.component.ts b/ng2-components/ng2-alfresco-social/src/components/rating.component.ts
index 1170f9ed18..b34abba2c0 100644
--- a/ng2-components/ng2-alfresco-social/src/components/rating.component.ts
+++ b/ng2-components/ng2-alfresco-social/src/components/rating.component.ts
@@ -15,14 +15,15 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output, ViewEncapsulation } from '@angular/core';
 import { RatingService } from './../services/rating.service';
 
 @Component({
     selector: 'adf-rating',
-    styleUrls: ['./rating.component.css'],
+    styleUrls: ['./rating.component.scss'],
     templateUrl: './rating.component.html',
-    providers: [RatingService]
+    providers: [RatingService],
+    encapsulation: ViewEncapsulation.None
 })
 export class RatingComponent implements OnChanges {
 
diff --git a/ng2-components/ng2-alfresco-social/src/material.module.ts b/ng2-components/ng2-alfresco-social/src/material.module.ts
new file mode 100644
index 0000000000..4ee5cb1db7
--- /dev/null
+++ b/ng2-components/ng2-alfresco-social/src/material.module.ts
@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright 2016 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { NgModule } from '@angular/core';
+import {
+    MdIconModule,
+    MdListModule
+} from '@angular/material';
+
+export function modules() {
+    return [
+        MdIconModule,
+        MdListModule
+    ];
+}
+
+@NgModule({
+    imports: modules(),
+    exports: modules()
+})
+export class MaterialModule {}