Merge ~deadlight/maas:icon-fixes into ~deadlight/maas:vanilla

[Karl Williams]

Fixes for the styling of icons across the app.

QA:

Nodes list: see all of the icons positioned
Nodes -> contollers -> controller details:
  - see the services card icon correctly positioned
  - click the Events tab - see the icon displayed in the table
  - click the Commissioning tab - see the icon displayed close to the name

Pod details
  - see that all of the icons in the summary table are displayed correctly

Machine details:
  - select the hardware tests tab - see the icon displayed closely to the name
  - check Commissioning and Evens in this context and see that they're also displaying correctly

Ensure that all of the above icons work in Firefox too.

[Anthony Dillon (ya-bo-ng)]

Good stuff, two very small comments.

review: Needs Fixing

[Karl Williams (deadlight)]

I've fixed the issues that you identified.

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

diff --git a/src/maasserver/static/js/angular/controllers/node_details.js b/src/maasserver/static/js/angular/controllers/node_details.js
index 1633a61..a1a8784 100644
--- a/src/maasserver/static/js/angular/controllers/node_details.js
+++ b/src/maasserver/static/js/angular/controllers/node_details.js
@@ -1083,7 +1083,7 @@ angular.module('MAAS').controller('NodeDetailsController', [
                 if(service.status === "running") {
                     return "success";
                 } else if(service.status === "dead") {
-                    return "power-error";
+                    return "error";
                 } else if(service.status === "degraded") {
                     return "warning";
                 } else {
diff --git a/src/maasserver/static/js/angular/directives/controller_image_status.js b/src/maasserver/static/js/angular/directives/controller_image_status.js
index 71efc55..003b22a 100644
--- a/src/maasserver/static/js/angular/directives/controller_image_status.js
+++ b/src/maasserver/static/js/angular/directives/controller_image_status.js
@@ -126,7 +126,7 @@ angular.module('MAAS').directive('maasControllerImageStatus',
             systemId: "="
         },
         template: [
-            '<i class="icon icon--loading u-animation--spin"',
+            '<i class="p-icon--loading u-animation--spin"',
                 'data-ng-if="showSpinner()"></i> ',
             '{$ getImageStatus() $}'].join(''),
         link: function(scope, element, attrs) {
diff --git a/src/maasserver/static/js/angular/directives/controller_status.js b/src/maasserver/static/js/angular/directives/controller_status.js
index a2b5514..e72607b 100644
--- a/src/maasserver/static/js/angular/directives/controller_status.js
+++ b/src/maasserver/static/js/angular/directives/controller_status.js
@@ -8,7 +8,7 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
     // Inject the controller-status.html into the template cache.
     $templateCache.put('directive/templates/controller-status.html', [
         '<span>',
-          '<span class="icon icon--{$ serviceClass $}" data-ng-if="!textOnly">',
+          '<span class="p-icon--{$ serviceClass $}" data-ng-if="!textOnly">',
           '</span>',
           '<span data-ng-if="textOnly" data-ng-bind="serviceText"></span>',
         '</span>'
diff --git a/src/maasserver/static/js/angular/directives/error_overlay.js b/src/maasserver/static/js/angular/directives/error_overlay.js
index fd33b0e..62baabc 100644
--- a/src/maasserver/static/js/angular/directives/error_overlay.js
+++ b/src/maasserver/static/js/angular/directives/error_overlay.js
@@ -13,7 +13,7 @@ angular.module('MAAS').run(['$templateCache', function ($templateCache) {
         '<header id="error-header" class="page-header" data-ng-show="show()">',
             '<div class="row">',
                 '<h1 class="page-header__title">',
-                    '<span class="icon icon--loading u-animation--spin ',
+                    '<span class="p-icon--loading u-animation--spin ',
                         'u-margin--right-small"',
                         'data-ng-hide="clientError"></span>',
                     '{$ getTitle() $}',
diff --git a/src/maasserver/static/js/angular/directives/maas_obj_form.js b/src/maasserver/static/js/angular/directives/maas_obj_form.js
index 8cd2387..679b8ef 100644
--- a/src/maasserver/static/js/angular/directives/maas_obj_form.js
+++ b/src/maasserver/static/js/angular/directives/maas_obj_form.js
@@ -582,7 +582,7 @@ angular.module('MAAS').directive('maasObjField', ['$compile',
                         && attrs.labelInfo.length > 0) {
                         var infoElement = angular.element('<i/>');
                         infoElement.addClass('icon');
-                        infoElement.addClass('icon--info');
+                        infoElement.addClass('p-icon--information');
                         infoElement.addClass('tooltip tooltip--left');
                         infoElement.addClass('u-margin--left-tiny');
                         if(attrs.labelLeft === "true") {
@@ -1070,7 +1070,7 @@ angular.module('MAAS').directive('maasObjSaving', function() {
             transclude: true,
             template: [
               '<span data-ng-if="saving">',
-                '<i class="icon icon--loading u-animation--spin"></i>',
+                '<i class="p-icon--loading u-animation--spin"></i>',
                 '<span data-ng-transclude></span>',
               '</span>'].join(''),
             link: function(scope, element, attrs, controller) {
diff --git a/src/maasserver/static/js/angular/directives/script_status.js b/src/maasserver/static/js/angular/directives/script_status.js
index d6e17d2..b1a3162 100644
--- a/src/maasserver/static/js/angular/directives/script_status.js
+++ b/src/maasserver/static/js/angular/directives/script_status.js
@@ -7,7 +7,7 @@
 angular.module('MAAS').run(['$templateCache', function ($templateCache) {
     // Inject the script_status.html into the template cache.
     $templateCache.put('directive/templates/script_status.html', [
-        '<span class="icon" data-ng-class="icon" data-ng-show="show"></span>'
+        '<span class="p-icon" data-ng-class="icon" data-ng-show="show"></span>'
     ].join(''));
 }]);
 
@@ -25,17 +25,17 @@ angular.module('MAAS').directive('maasScriptStatus', function() {
                 switch($scope.scriptStatus) {
                     // SCRIPT_STATUS.PENDING
                     case 0:
-                        $scope.icon = 'icon--pending';
+                        $scope.icon = 'p-icon--pending';
                         break;
                     // SCRIPT_STATUS.RUNNING
                     case 1:
                     // SCRIPT_STATUS.INSTALLING
                     case 7:
-                        $scope.icon = 'icon--running';
+                        $scope.icon = 'p-icon--running';
                         break;
                     // SCRIPT_STATUS.PASSED
                     case 2:
-                        $scope.icon = 'icon--pass';
+                        $scope.icon = 'p-icon--pass';
                         break;
                     // SCRIPT_STATUS.FAILED
                     case 3:
@@ -45,18 +45,18 @@ angular.module('MAAS').directive('maasScriptStatus', function() {
                     case 6:
                     // SCRIPT_STATUS.FAILED_INSTALLING
                     case 8:
-                        $scope.icon = 'icon--power-error';
+                        $scope.icon = 'p-icon--power-error';
                         break;
                     // SCRIPT_STATUS.TIMEDOUT
                     case 4:
-                        $scope.icon = 'icon--timed-out';
+                        $scope.icon = 'p-icon--timed-out';
                         break;
                     case -1:
                         // No scripts have been run.
                         $scope.show = false;
                         break;
                     default:
-                        $scope.icon = 'icon--help';
+                        $scope.icon = 'p-icon--help';
                         break;
                 }
             }
diff --git a/src/maasserver/static/js/angular/directives/tests/test_script_status.js b/src/maasserver/static/js/angular/directives/tests/test_script_status.js
index 70a9a31..c43d192 100644
--- a/src/maasserver/static/js/angular/directives/tests/test_script_status.js
+++ b/src/maasserver/static/js/angular/directives/tests/test_script_status.js
@@ -36,55 +36,55 @@ describe("maasScriptStatus", function() {
     it("SCRIPT_STATUS.PENDING", function() {
         var directive = compileDirective("0");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--pending");
+        expect(select.attr("class")).toBe("p-icon--pending");
     });
 
     it("SCRIPT_STATUS.RUNNING", function() {
         var directive = compileDirective("1");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--running");
+        expect(select.attr("class")).toBe("p-icon--running");
     });
 
     it("SCRIPT_STATUS.INSTALLING", function() {
         var directive = compileDirective("7");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--running");
+        expect(select.attr("class")).toBe("p-icon--running");
     });
 
     it("SCRIPT_STATUS.PASSED", function() {
         var directive = compileDirective("2");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--pass");
+        expect(select.attr("class")).toBe("p-icon--pass");
     });
 
     it("SCRIPT_STATUS.FAILED", function() {
         var directive = compileDirective("3");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--power-error");
+        expect(select.attr("class")).toBe("p-icon--power-error");
     });
 
     it("SCRIPT_STATUS.ABORTED", function() {
         var directive = compileDirective("5");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--power-error");
+        expect(select.attr("class")).toBe("p-icon--power-error");
     });
 
     it("SCRIPT_STATUS.DEGRADED", function() {
         var directive = compileDirective("6");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--power-error");
+        expect(select.attr("class")).toBe("p-icon--power-error");
     });
 
     it("SCRIPT_STATUS.FAILED_INSTALLING", function() {
         var directive = compileDirective("8");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--power-error");
+        expect(select.attr("class")).toBe("p-icon--power-error");
     });
 
     it("SCRIPT_STATUS.TIMEDOUT", function() {
         var directive = compileDirective("4");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--timed-out");
+        expect(select.attr("class")).toBe("p-icon--timed-out");
     });
 
     it("NONE", function() {
@@ -96,6 +96,6 @@ describe("maasScriptStatus", function() {
     it("UNKNOWN", function() {
         var directive = compileDirective("99");
         var select = directive.find("span");
-        expect(select.attr("class")).toBe("icon icon--help");
+        expect(select.attr("class")).toBe("p-icon--help");
     });
 });
diff --git a/src/maasserver/static/partials/boot-images.html b/src/maasserver/static/partials/boot-images.html
index f0b0d3d..3c9b53b 100644
--- a/src/maasserver/static/partials/boot-images.html
+++ b/src/maasserver/static/partials/boot-images.html
@@ -114,7 +114,7 @@
             <table data-ng-if="showImagesTable()">
                 <thead>
                     <tr>
-                        <th colspan="2">Release</th>
+                        <th>Release</th>
                         <th>Architecture</th>
                         <th>Size</th>
                         <th>Status</th>
@@ -123,20 +123,18 @@
                 </thead>
                 <tbody>
                     <tr data-ng-if="!ltsIsSelected()">
-                        <td colspan="6" aria-label="Error">
+                        <td colspan="5" aria-label="Error">
                             <i class="p-icon--error">Error: </i> Select at least one 14.04+ LTS release and one architecture.
                         </td>
                     </tr>
                     <tr data-ng-if="!commissioningSeriesSelected()">
-                        <td colspan="6" aria-label="Error">
+                        <td colspan="5" aria-label="Error">
                             <i class="p-icon--error">Error: </i> Ubuntu {$ bootResources.ubuntu.commissioning_series $} must be selected as it is the operating system used for commissioning.
                         </td>
                     </tr>
                     <tr data-ng-repeat="image in ubuntuImages | orderBy:['-title', 'arch']" data-ng-class="{'is-active': canBeRemoved(image) && ubuntuDeleteId === image.resourceId}">
-                        <td>
-                            <i class="{$ image.icon $}"></i>
-                        </td>
                         <td aria-label="Release">
+                            <i class="{$ image.icon $}"></i>
                             {$ image.title $} <span class="p-tooltip__message" role="tooltip" id="tooltip-{$ image.resourceId}" data-ng-if="canBeRemoved(image)"><i class="p-icon--warning p-tooltip p-tooltip--top-right"  aria-describedby="tooltip-{$ image.resourceId}">Image no longer exists at the source.</span></i>
                         </td>
                         <td aria-label="Architecture">{$ image.arch $}</td>
@@ -180,7 +178,7 @@
             <table class="p-table-expanding">
                 <thead>
                     <tr>
-                        <th colspan="2">Name</th>
+                        <th>Name</th>
                         <th>Architecture</th>
                         <th>Size</th>
                         <th>Status</th>
@@ -188,13 +186,10 @@
                 </thead>
                 <tbody>
                     <tr data-ng-if="!ubuntuCoreImages.length">
-                        <td colspan="5">No images have been selected for syncing.</td>
+                        <td colspan="4">No images have been selected for syncing.</td>
                     </tr>
                     <tr data-ng-repeat="image in ubuntuCoreImages | orderBy:['-title', 'arch']">
-                        <td>
-                            <i class="{$ image.icon $}"></i>
-                        </td>
-                        <td aria-label="Name">{$ image.title $}</td>
+                        <td aria-label="Name"><i class="{$ image.icon $}"></i>{$ image.title $}</td>
                         <td aria-label="Architecture">{$ image.arch $}</td>
                         <td aria-label="Size">{$ image.size $}</td>
                         <td aria-label="Status">{$ image.status $}</td>
@@ -227,7 +222,7 @@
             <table>
                 <thead>
                     <tr>
-                        <th colspan="2">Release</th>
+                        <th>Release</th>
                         <th>Architecture</th>
                         <th>Size</th>
                         <th>Status</th>
@@ -235,15 +230,13 @@
                 </thead>
                 <tbody>
                     <tr data-ng-if="!otherImages.length">
-                        <td colspan="5">
+                        <td colspan="4">
                             No images have been selected for syncing.
                         </td>
                     </tr>
                     <tr data-ng-repeat="image in otherImages | orderBy:['-title', 'arch']">
-                        <td>
-                            <i class="{$ image.icon $}"></i>
-                        </td>
                         <td aria-label="Release">
+                            <i class="{$ image.icon $}"></i>
                             {$ image.title $}
                         </td>
                         <td aria-label="Architecture">{$ image.arch $}</td>
diff --git a/src/maasserver/static/partials/cards/services.html b/src/maasserver/static/partials/cards/services.html
index 66c57f5..4a8bc8a 100644
--- a/src/maasserver/static/partials/cards/services.html
+++ b/src/maasserver/static/partials/cards/services.html
@@ -1,6 +1,9 @@
 <header class="p-card__header">
-  <h2 class="p-heading--four">Services</h2>
-  <h3 class="p-heading--three"><span data-maas-controller-status="node" data-maas-services="services" aria-label="Status"></span> <span data-maas-controller-status="node" data-maas-services="services" data-maas-text-only="true"></span></h3>
+    <h2 class="p-heading--four">Services</h2>
+    <div class="u-vertically-center">
+        <span data-maas-controller-status="node" data-maas-services="services" aria-label="Status" class="u-hide--small"></span>
+        <h3 class="p-heading--three u-no-margin--top"><span data-maas-controller-status="node" data-maas-services="services" data-maas-text-only="true"></span></h3>
+    </div>
 </header>
 <div>
     <ul class="p-list-tree" aria-multiselectable="true" role="tablist">
diff --git a/src/maasserver/static/partials/intro-user.html b/src/maasserver/static/partials/intro-user.html
index 160e343..3e0384e 100644
--- a/src/maasserver/static/partials/intro-user.html
+++ b/src/maasserver/static/partials/intro-user.html
@@ -2,8 +2,7 @@
     <div class="row">
         <div class="p-card--highlighted col-12">
             <h2 class="p-card__title">
-                <i class="icon icon--large u-margin--right-tiny"
-                    data-ng-class="{'icon--success': canContinue(), 'p-icon--success-muted': !canContinue()}"></i>
+                <i data-ng-class="{'p-icon--success': canContinue(), 'p-icon--success-muted': !canContinue()}"></i>
                 SSH keys for {$ user.username $}
             </h2>
             <div class="p-card__content">
@@ -19,9 +18,9 @@
                 MAAS has been successfully set up
             </h2>
             <div class="p-card__content">
-                <p class="u-margin--top"><i class="icon icon--success u-margin--right-small"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>
-                <p class="u-margin--top"><i class="icon icon--success u-margin--right-small"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>
-                <p class="u-margin--top u-margin--bottom"><i class="icon icon--success u-margin--right-small"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>
+                <p class="u-margin--top"><i class="p-icon--success"></i>Once DHCP is enabled, set your machines to PXE boot and they will be automatically enlisted in the Nodes tab.</p>
+                <p class="u-margin--top"><i class="p-icon--success"></i>Discovered MAC/IP pairs in your network will be listed on your dashboard and can be added to MAAS.</p>
+                <p class="u-margin--top u-margin--bottom"><i class="p-icon--success"></i>The fabrics, VLANs and subnets in your network will be automatically added to MAAS in Networks.</p>
             </div>
         </div>
     </div>
diff --git a/src/maasserver/static/partials/intro.html b/src/maasserver/static/partials/intro.html
index a481a5a..8a9b323 100644
--- a/src/maasserver/static/partials/intro.html
+++ b/src/maasserver/static/partials/intro.html
@@ -3,8 +3,7 @@
         <div class="col-10">
             <div class="p-card--highlighted">
                 <h2 class="p-card__title">
-                    <i class="icon icon--large u-margin--right-tiny"
-                        data-ng-class="{ 'icon--success': !welcomeInError(), 'icon--error': welcomeInError() }"></i>
+                    <i data-ng-class="{ 'p-icon--success': !welcomeInError(), 'p-icon--error': welcomeInError() }"></i>
                     Welcome to MAAS
                 </h2>
                 <div class="p-card__content">
diff --git a/src/maasserver/static/partials/machines-table.html b/src/maasserver/static/partials/machines-table.html
index d4bd159..a5adfd3 100644
--- a/src/maasserver/static/partials/machines-table.html
+++ b/src/maasserver/static/partials/machines-table.html
@@ -52,7 +52,7 @@
                 <a href="#/node/{$ node.system_id $}" class="extra-macs" data-ng-show="node.extra_macs.length">(+{$ node.extra_macs.length $})</a>
             </td>
             <td class="powerstate u-upper-case--first" aria-label="Power state">
-                <span data-ng-if="node.power_state != 'unknown'" class="icon icon--power-{$ node.power_state $} u-margin--right-tiny"></span> {$ node.power_state $}
+                <span data-ng-if="node.power_state != 'unknown'" class="p-icon--power-{$ node.power_state $} u-margin--right-tiny"></span> {$ node.power_state $}
             </td>
             <td class="u-hide--small">
                 <i data-ng-if="showSpinner(node)" class="p-icon--spinner u-animation--spin u-hide--small"></i>
@@ -66,28 +66,28 @@
                 {$ getStatusText(node) $}
                 <span class="u-hide--medium u-hide--large">
                     <i data-ng-if="showSpinner(node)" class="p-icon--spinner u-animation--spin"></i>
-                    <span class="p-tooltip p-tooltip--top-right">
+                    <span class="p-tooltip p-tooltip--left">
                         <i data-ng-if="showNodeStatus(node)" data-maas-script-status="script-status" data-script-status="node.other_test_status" aria-labelledby="{$ node.other_test_status_tooltip $}"></i>
                         <span class="p-tooltip__message" role="tooltip" id="other-status-tooltip-{$ node.fqdn $}">{$ node.other_test_status_tooltip $}</span>
                     </span>
-                    <span class="p-tooltip p-tooltip--top-right">
+                    <span class="p-tooltip p-tooltip--left">
                         <i data-ng-if="showFailedTestWarning(node)" class="p-icon--warning" aria-describedby="failed-test-tooltip-large-{$ node.fqdn $}"></i>
                         <span class="p-tooltip__message" role="tooltip" id="failed-test-tooltip-large-{$ node.fqdn $}">{$ node.other_test_status_tooltip $}</span>
                     </span>
                 </span>
             </td>
             <td aria-label="Owner">&nbsp;{$ node.owner $}</td>
-            <td class="u-align--right u-hide--small p-tooltip p-tooltip--top-right" aria-label="CPU">
+            <td class="u-align--right u-hide--small p-tooltip p-tooltip--left" aria-label="CPU">
                 <span data-maas-script-status="script-status" data-script-status="node.cpu_test_status" data-ng-if="node.cpu_test_status !== 2" aria-describedby="node-cpu-tooltip-{$ node.fqdn $}"></span>
                 {$ node.cpu_count $}
                 <span class="p-tooltip__message" role="tooltip" id="node-cpu-tooltip-{$ node.fqdn $}">{$ node.cpu_test_status_tooltip $}</span>
             </td>
-            <td class="u-align--right u-hide--small p-tooltip p-tooltip--top-right" aria-label="Memory">
+            <td class="u-align--right u-hide--small p-tooltip p-tooltip--left" aria-label="Memory">
                 <span data-maas-script-status="script-status" data-script-status="node.memory_test_status" data-ng-if="node.memory_test_status !== 2" aria-describedby="node-memory-tooltip-{$ node.fqdn $}"></span>
                 {$ node.memory $}
                 <span class="p-tooltip__message" role="tooltip" id="node-memory-tooltip-{$ node.fqdn $}">{$ node.memory_test_status_tooltip $}</span>
             </td>
-            <td class="u-align--right u-hide--small p-tooltip p-tooltip--top-right" aria-label="Disks">
+            <td class="u-align--right u-hide--small p-tooltip p-tooltip--left" aria-label="Disks">
                 <span class="" data-maas-script-status="script-status" data-script-status="node.storage_test_status" data-ng-if="node.storage_test_status !== 2" aria-describedby="disk-count-tooltip-{$ node.fqdn $}">
                 </span>
                 {$ node.physical_disk_count $}
diff --git a/src/maasserver/static/partials/networks-list.html b/src/maasserver/static/partials/networks-list.html
index c7ca14c..0efb77e 100644
--- a/src/maasserver/static/partials/networks-list.html
+++ b/src/maasserver/static/partials/networks-list.html
@@ -190,7 +190,7 @@
                     <tr data-ng-repeat="row in group.spaces.orphanVLANs">
                         <td aria-label="Space">
                             <a data-ng-if="$index === 0" href="#/space/{$ row.space.id $}">(undefined)</a>
-                            <span data-ng-if="$index === 0" class="icon icon--warning tooltip tooltip--right u-margin--left-small u-display--desktop"
+                            <span data-ng-if="$index === 0" class="p-icon--warning tooltip tooltip--right u-margin--left-small u-display--desktop"
                               aria-label="MAAS integrations require a space in order to determine the purpose of a network.&#xa;Define a space for each subnet by selecting the space on the VLAN details page.&#xa;If an approprate space does not exist, one may be created on this page."></span>
                         </td>
                         <td>
diff --git a/src/maasserver/static/partials/node-details.html b/src/maasserver/static/partials/node-details.html
index c7b7ca3..c8014de 100755
--- a/src/maasserver/static/partials/node-details.html
+++ b/src/maasserver/static/partials/node-details.html
@@ -274,7 +274,7 @@
             </ul>
         </nav>
     </header>
-    
+
     <section class="p-strip is-shallow" data-ng-if="section.area === 'summary'">
       <div class="row">
         <div data-ng-if="isSuperUser()">
@@ -288,7 +288,7 @@
                 data-ng-if="!isController && !isDevice && hasInvalidArchitecture() && isRackControllerConnected() && hasUsableArchitectures()">
                 <p class="p-notification__response">
                     <span class="p-notification__status">Error:</span> This machine currently has an invalid architecture. Update the architecture of this machine to make it deployable.
-                </p 
+                </p>
             </div>
             <div class="p-notification--negative"
                 data-ng-if="!isController && !isDevice && hasInvalidArchitecture() && isRackControllerConnected() && !hasUsableArchitectures()">
@@ -594,28 +594,28 @@
                 <ul class="p-list-tree" aria-multiselectable="true" role="tablist">
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.regiond) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.regiond) $}"></span>
                             &nbsp;regiond
                             <span data-ng-if="services.regiond.status_info"> &mdash; {$ services.regiond.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.bind9) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.bind9) $}"></span>
                             &nbsp;bind9
                             <span data-ng-if="services.bind9.status_info"> &mdash; {$ services.bind9.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.proxy) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.proxy) $}"></span>
                             &nbsp;proxy
                             <span data-ng-if="services.proxy.status_info"> &mdash; {$ services.proxy.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item" data-ng-if="services.ntp_region">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.ntp_region) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.ntp_region) $}"></span>
                             &nbsp;ntp
                             <span data-ng-if="services.ntp_region.status_info"> &mdash; {$ services.ntp_region.status_info $}</span>
                         </span>
@@ -629,21 +629,21 @@
                 <ul class="p-list-tree" aria-multiselectable="true" role="tablist">
                     <li class="p-list-tree__item p-list-tree__item--group">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.rackd) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.rackd) $}"></span>
                             &nbsp;rackd
                             <span data-ng-if="services.rackd.status_info"> &mdash; {$ services.rackd.status_info $}</span>
                         </span>
                         <ul class="p-list-tree" role="tabpanel" aria-hidden="true">
                             <li class="p-list-tree__item">
                                 <span>
-                                    <span class="icon icon--{$ getServiceClass(services.http) $}"></span>
+                                    <span class="p-icon--{$ getServiceClass(services.http) $}"></span>
                                     &nbsp;http
                                     <span data-ng-if="services.http.status_info"> &mdash; {$ services.http.status_info $}</span>
                                 </span>
                             </li>
                             <li class="p-list-tree__item">
                                 <span>
-                                    <span class="icon icon--{$ getServiceClass(services.tftp) $}"></span>
+                                    <span class="p-icon--{$ getServiceClass(services.tftp) $}"></span>
                                     &nbsp;tftp
                                     <span data-ng-if="services.tftp.status_info"> &mdash; {$ services.tftp.status_info $}</span>
                                 </span>
@@ -652,28 +652,28 @@
                     </li>
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.dhcpd) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.dhcpd) $}"></span>
                             &nbsp;dhcpd
                             <span data-ng-if="services.dhcpd.status_info"> &mdash; {$ services.dhcpd.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.dhcpd6) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.dhcpd6) $}"></span>
                             &nbsp;dhcpd6
                             <span data-ng-if="services.dhcpd6.status_info"> &mdash; {$ services.dhcpd6.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.tgt) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.tgt) $}"></span>
                             &nbsp;tgt
                             <span data-ng-if="services.tgt.status_info"> &mdash; {$ services.tgt.status_info $}</span>
                         </span>
                     </li>
                     <li class="p-list-tree__item" data-ng-if="services.ntp_rack">
                         <span>
-                            <span class="icon icon--{$ getServiceClass(services.ntp_rack) $}"></span>
+                            <span class="p-icon--{$ getServiceClass(services.ntp_rack) $}"></span>
                             &nbsp;ntp
                             <span data-ng-if="services.ntp_rack.status_info"> &mdash; {$ services.ntp_rack.status_info $}</span>
                         </span>
@@ -869,7 +869,7 @@
                                     </div>
                                 </td>
                                 <td class="p-table-expanding__panel" data-ng-if="isShowingMembers(interface)">
-                                    <div class="row" data-ng-class="{ 'is-active': isShowingMembers(interface) }" 
+                                    <div class="row" data-ng-class="{ 'is-active': isShowingMembers(interface) }"
                                         data-ng-repeat="member in interface.members"
                                         data-ng-show="isShowingMembers(interface)">
                                         <div class="col-1"></div>
@@ -1395,7 +1395,7 @@
                                                         </select>
                                                     </div>
                                                 </div>
-                                                <div class="p-form__group p-form-validation" data-ng-if="newInterface.mode == 'static'" 
+                                                <div class="p-form__group p-form-validation" data-ng-if="newInterface.mode == 'static'"
                                                     data-ng-class="{ 'is-error': isIPAddressInvalid(newInterface) }">
                                                     <label for="ip-address" class="p-form__label">IP address</label>
                                                     <div class="p-form__control">
@@ -1415,7 +1415,7 @@
                                                     data-ng-class="{ 'is-error': isMACAddressInvalid(newInterface.mac_address, true) }">
                                                     <label for="mac" class="p-form__label">MAC address</label>
                                                     <div class="p-form__control">
-                                                        <input name="mac" type="text" 
+                                                        <input name="mac" type="text"
                                                             class="p-form-validation__input"
                                                             placeholder="00:00:00:00:00:00"
                                                             data-ng-model="newInterface.mac_address"
@@ -1558,7 +1558,7 @@
                                 <td class="col-2" aria-label="Mount options">{$ filesystem.mount_options $}</td>
                                 <td class="col-2 u-align--right">
                                     <div class="p-contextual-menu" toggle-ctrl data-ng-if="!isAllStorageDisabled()">
-                                        <button class="p-contextual-menu__toggle" aria-controls="#{$ item.name $}-menu" 
+                                        <button class="p-contextual-menu__toggle" aria-controls="#{$ item.name $}-menu"
                                             data-ng-click="toggleMenu()" aria-haspopup="true">View actions</button>
                                         <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled" id="{$ item.name $}-menu">
                                             <a href="" class="p-contextual-menu__link"
@@ -1608,7 +1608,7 @@
                             <tr class="is-active" data-ng-if="dropdown" data-ng-switch="dropdown">
                                 <!-- Adding a new TMPFS or RAMFPS file system -->
                                 <td class="p-table-expanding__panel" data-ng-controller="NodeAddSpecialFilesystemController" data-ng-switch-when="special">
-                                    <div class="row" data-ng-if="windowWidth <= 768">    
+                                    <div class="row" data-ng-if="windowWidth <= 768">
                                         <div class="col-8">
                                             <h2 data-ng-click="cancel()">Adding filesystem</h2>
                                         </div>
@@ -1831,7 +1831,7 @@
                                     <td class="col-2 u-align--right">
                                         <div class="p-contextual-menu" toggle-ctrl
                                             data-ng-if="canAddLogicalVolume(item) || canAddPartition(item) || canEdit(item) || canDelete(item)">
-                                            <button class="p-contextual-menu__toggle" aria-controls="#{$ item.name $}-menu" 
+                                            <button class="p-contextual-menu__toggle" aria-controls="#{$ item.name $}-menu"
                                                 data-ng-click="toggleMenu()" aria-haspopup="true">View actions</button>
                                             <div class="p-contextual-menu__dropdown" role="menu" data-ng-show="isToggled" id="{$ item.name $}-menu">
                                                 <a href="" class="p-contextual-menu__link"
@@ -1853,7 +1853,7 @@
                                             </div>
                                         </div>
                                     </td>
-                                    <td class="p-table-expanding__panel" 
+                                    <td class="p-table-expanding__panel"
                                         data-ng-if="(availableMode === 'edit' || availableMode === 'format-mount' || availableMode === 'partition' || availableMode === 'logical-volume' || availableMode === 'delete') && item.$selected">
                                         <div class="row" data-ng-if="windowWidth <= 768">
                                             <div class="col-8">
@@ -2012,7 +2012,7 @@
                                                         <span>Partition</span>
                                                     </div>
                                                 </div>
-                                                <div class="p-form__group p-form-validation" 
+                                                <div class="p-form__group p-form-validation"
                                                     data-ng-class="{ 'is-error': isAddPartitionSizeInvalid(item) }">
                                                     <label class="p-form__label" for="size">Size</label>
                                                     <div class="p-form__controls">
@@ -2629,18 +2629,14 @@
                 <table data-ng-if="node.events.length">
                     <thead>
                         <tr>
-                            <th class="col-1"></th>
-                            <th class="col-9">Event</th>
+                            <th class="col-10">Event</th>
                             <th class="col-2">Time</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr
                             data-ng-repeat="event in node.events | orderByDate:'created':'id' | limitTo:events.limit">
-                            <td class="col-1" aria-label="{$ event.type.level $}">
-                                <span class="p-icon--{$ event.type.level $}"></span>
-                            </td>
-                            <td class="col-9" aria-label="Event">{$ getEventText(event) $}</td>
+                            <td class="col-10" aria-label="Event"><span class="p-icon--{$ event.type.level $}"></span>{$ getEventText(event) $}</td>
                             <td class="col-2" aria-label="Created">{$ event.created $}</td>
                         </tr>
                     </tbody>
diff --git a/src/maasserver/static/partials/node-events.html b/src/maasserver/static/partials/node-events.html
index 636c59d..f355177 100644
--- a/src/maasserver/static/partials/node-events.html
+++ b/src/maasserver/static/partials/node-events.html
@@ -43,7 +43,7 @@
                         <tr
                             data-ng-repeat="event in events | filter:search | orderByDate:'created':'id' track by event.id">
                             <td class="table-col--1 u-padding--right-none u-padding--left-none">
-                                <span class="icon icon--{$ event.type.level $}"></span>
+                                <span class="p-icon--{$ event.type.level $}"></span>
                             </td>
                             <td class="table-col--79">
                                 {$ getEventText(event) $}
diff --git a/src/maasserver/static/partials/pod-details.html b/src/maasserver/static/partials/pod-details.html
index 9fa43e1..facbbff 100644
--- a/src/maasserver/static/partials/pod-details.html
+++ b/src/maasserver/static/partials/pod-details.html
@@ -137,7 +137,7 @@
                 </form>
             </div>
         </div>
-        <div class="p-strip is-shallow u-no-padding--bottom" media-query="min-width: 769px" offset="89" data-ng-class="{ 'u-hide': action.option }">       
+        <div class="p-strip is-shallow u-no-padding--bottom" media-query="min-width: 769px" offset="89" data-ng-class="{ 'u-hide': action.option }">
             <nav class="p-tabs">
                 <ul class="p-tabs__list" role="tablist">
                     <li class="p-tabs__item" role="presentation">
@@ -194,7 +194,7 @@
 
             <div class="col-9" data-ng-if="!pod.composed_machines_count">
                 <div class="u-align--center u-vertical--align u-align--center">
-                    <i class="icon icon--compose-machine icon--huge" style="width: 128px; height: 128px;"></i>
+                    <i class="p-icon--compose-machine" style="width: 128px; height: 128px;"></i>
                     <h3>You have not composed any machines yet.</h3>
                     <button class="p-button--positive is-inline" data-ng-if="canCompose()" data-ng-click="composeMachine()">Compose machine</button>
                 </div>
diff --git a/src/maasserver/static/partials/script-results-list.html b/src/maasserver/static/partials/script-results-list.html
index 9f2fc46..87323d3 100644
--- a/src/maasserver/static/partials/script-results-list.html
+++ b/src/maasserver/static/partials/script-results-list.html
@@ -13,7 +13,6 @@
                     <table class="p-table-expanding">
                         <thead>
                             <tr>
-                                <th class="col-1"></th>
                                 <th class="col-3">Name</th>
                                 <th class="col-2">Tags</th>
                                 <th class="col-1">Runtime</th>
@@ -24,10 +23,8 @@
                         </thead>
                         <tbody>
                             <tr data-ng-repeat="result in results" data-ng-class="{'is-active': result.showing_results || result.showing_history}">
-                                <td class="col-1" aria-label="Status">
-                                    <span data-maas-script-status="script-status" data-script-status="result.status"></span>
-                                </td>
                                 <td class="col-3" data-ng-click="result.showing_results = !result.showing_results" aria-label="Name">
+                                    <span data-maas-script-status="script-status" data-script-status="result.status"></span>
                                     {$ result.name $}
                                     <button class="p-button--base u-float--right" data-ng-class="{'p-icon--chevron': !result.showing_results, 'p-icon--close': result.showing_results}" data-ng-if="!result.showing_history"></button>
                                 </td>
diff --git a/src/maasserver/static/partials/settings.html b/src/maasserver/static/partials/settings.html
index 0339ac2..f700394 100644
--- a/src/maasserver/static/partials/settings.html
+++ b/src/maasserver/static/partials/settings.html
@@ -463,7 +463,7 @@
                                 </div>
                                 <div class="is-active">
                                     <div class=" u-float--left">
-                                            <p><span class="icon icon--warning"></span> Are you sure you want to remove this repository?</p>
+                                            <p><span class="p-icon--warning"></span> Are you sure you want to remove this repository?</p>
                                     </div>
                                     <div class=" u-float--right">
                                             <button class="button--base" data-ng-click="repositoryExitRemove()">Cancel</button>
diff --git a/src/maasserver/static/partials/switches-table.html b/src/maasserver/static/partials/switches-table.html
index cefe8f3..0b5ee74 100644
--- a/src/maasserver/static/partials/switches-table.html
+++ b/src/maasserver/static/partials/switches-table.html
@@ -49,10 +49,10 @@
                 <a href="#/node/{$ node.link_type $}/{$ node.system_id $}" class="extra-macs" data-ng-show="node.extra_macs.length">(+{$ node.extra_macs.length $})</a>
             </td>
             <td class="powerstate u-upper-case--first" aria-label="Power state">
-                <span title="{$ node.power_state $}" data-ng-if="node.power_state != 'unknown'" class="icon icon--power-{$ node.power_state $} u-margin--right-tiny"></span> {$ node.power_state $}
+                <span title="{$ node.power_state $}" data-ng-if="node.power_state != 'unknown'" class="p-icon--power-{$ node.power_state $}"></span> {$ node.power_state $}
             </td>
             <td class="table-col--3 u-display--desktop"><i data-ng-if="showSpinner(node)" class="p-icon--spinner u-animation--spin u-display--desktop"></i></td>
-            <td class="status u-text--truncate" aria-label="Status">{$ getStatusText(node) $} <span class="u-display--mobile"><i data-ng-if="showSpinner(node)" class="p-icon--spinner u-animation--spin u-margin--left-tiny"></i></span></td>
+            <td class="status u-text--truncate" aria-label="Status">{$ getStatusText(node) $} <span class="u-display--mobile"><i data-ng-if="showSpinner(node)" class="p-icon--spinner u-animation--spin"></i></span></td>
             <td class="table-col--10" aria-label="Owner">{$ node.owner $}</td>
             <td class="u-align--right u-display--desktop" aria-label="Model">{$ node.metadata['physical-mfg-name'] + ' ' + node.metadata['physical-model-name']$}</td>
             <td class="u-align--right u-display--desktop" aria-label="Serial">{$ node.metadata['physical-serial-num'] $}</td>
diff --git a/src/maasserver/static/partials/vlan-details.html b/src/maasserver/static/partials/vlan-details.html
index a8f7cc0..b2b7dee 100644
--- a/src/maasserver/static/partials/vlan-details.html
+++ b/src/maasserver/static/partials/vlan-details.html
@@ -260,7 +260,7 @@
                             <i class="p-icon--information">Help:</i>
                             <span class="p-tooltip__message" role="tooltip">A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs.</span>
                         </span>
-                       <span class="icon icon--information tooltip" aria-label="A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs."></span>
+                       <span class="p-icon--information tooltip" aria-label="A rack controller controls hosts and images and runs network services&#xa;like DHCP for connected VLANs."></span>
                       </dt>
                       <dd>
                           <span data-ng-repeat="rack in vlanDetails.relatedControllers">
diff --git a/src/maasserver/static/scss/_patterns_icons.scss b/src/maasserver/static/scss/_patterns_icons.scss
index d09e5f1..aa5a8e9 100644
--- a/src/maasserver/static/scss/_patterns_icons.scss
+++ b/src/maasserver/static/scss/_patterns_icons.scss
@@ -1,20 +1,14 @@
-// MAAS Status icon colours
-$status-failed:        $color-negative;
-$status-in-progress:   $color-information;
-$status-queued:        $color-mid-dark;
-$status-succeeded:     $color-positive;
-$status-waiting:       $color-caution;
-
 @mixin maas-icon-edit($color) {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3e%3ctitle%3eedit%3c/title%3e%3cg fill='#{$color}' fill-rule='evenodd'%3e%3cpath d='M17 15h5v1h-5zm-3 3h8v1h-8zm-3 3h11v1H11zm5.75-21L3.47 13.517S.956 17.465 0 21.987v.004l.002.004V22c4.532-.955 8.48-3.472 8.48-3.472L22 5.25 16.75 0zM4.51 14.555L7.454 17.5c-.2.114-2.99 2.064-5.544 2.602V20.093l-.002-.003c.537-2.546 2.485-5.334 2.602-5.537v.002z'/%3e%3cpath d='M2.234 18l1.85 1.85L1 21'/%3e%3c/g%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3e%3ctitle%3eedit%3c/title%3e%3cg fill='" + rgba($color, 1) + "' fill-rule='evenodd'%3e%3cpath d='M17 15h5v1h-5zm-3 3h8v1h-8zm-3 3h11v1H11zm5.75-21L3.47 13.517S.956 17.465 0 21.987v.004l.002.004V22c4.532-.955 8.48-3.472 8.48-3.472L22 5.25 16.75 0zM4.51 14.555L7.454 17.5c-.2.114-2.99 2.064-5.544 2.602V20.093l-.002-.003c.537-2.546 2.485-5.334 2.602-5.537v.002z'/%3e%3cpath d='M2.234 18l1.85 1.85L1 21'/%3e%3c/g%3e%3c/svg%3e");
 }
 
 @mixin maas-icon-power-on($color) {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2215%22%20width%3D%2214%22%3E%3Cpath%20d%3D%22M11.04%202.323l-.324%202.268a5.017%205.017%200%200%201%201.352%203.426c0%202.787-2.274%205.056-5.068%205.056s-5.067-2.269-5.067-5.056a5.02%205.02%200%200%201%201.351-3.426L2.96%202.323A6.935%206.935%200%200%200%200%208.017C0%2011.868%203.14%2015%207%2015s7-3.132%207-6.983a6.933%206.933%200%200%200-2.96-5.694zM6%200h2v7H6V0z%22%20fill%3D%22%230E8420%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2215%22%20width%3D%2214%22%3E%3Cpath%20d%3D%22M11.04%202.323l-.324%202.268a5.017%205.017%200%200%201%201.352%203.426c0%202.787-2.274%205.056-5.068%205.056s-5.067-2.269-5.067-5.056a5.02%205.02%200%200%201%201.351-3.426L2.96%202.323A6.935%206.935%200%200%200%200%208.017C0%2011.868%203.14%2015%207%2015s7-3.132%207-6.983a6.933%206.933%200%200%200-2.96-5.694zM6%200h2v7H6V0z%22%20fill%3D%22" + encodecolor($color) + "%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E");
 }
 
 @mixin maas-icons {
   .p-icon {
+    padding-right: $sp-small;
 
     &--edit {
       @extend %icon;
@@ -27,37 +21,41 @@ $status-waiting:       $color-caution;
 
     &--status-failed {
       @extend %icon;
-      background: url('data:image/svg+xml;utf8,%3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + rgba($status-failed, 1) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + rgba($status-failed, 1) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+      background: url('data:image/svg+xml;utf8,%3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + encodecolor($color-negative) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + encodecolor($color-negative) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
     }
 
     &--status-in-progress {
       @extend %icon;
-      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + rgba($status-in-progress, 1) +'" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + rgba($status-in-progress, 1) +'" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + encodecolor($color-information) +'" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + encodecolor($color-information) +'" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
     }
 
     &--status-queued {
       @extend %icon;
-      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + rgba($status-queued, 1) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + rgba($status-queued, 1) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + encodecolor($color-mid-dark) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + encodecolor($color-mid-dark) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
     }
 
     &--status-succeeded {
       @extend %icon;
-      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + rgba($status-succeeded, 1) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + rgba($status-succeeded, 1) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + encodecolor($color-positive) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + encodecolor($color-positive) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
     }
 
     &--status-waiting {
       @extend %icon;
-      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + rgba($status-waiting, 1) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + rgba($status-waiting, 1) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+      background: url('data:image/svg+xml;utf8, %3Csvg width="16px" height="16px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"%3E%3Cg id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"%3E%3Cg id="status-queued" transform="translate(1, 1)"%3E%3Cg id="Page-1"%3E%3Cg id="status-queued"%3E%3Cg id="Group"%3E%3Ccircle id="Oval" stroke="' + encodecolor($color-caution) + '" stroke-width="2" cx="6" cy="6" r="6"%3E%3C/circle%3E%3Ccircle id="Oval-Copy" class="status-circle" fill="' + encodecolor($color-caution) + '" cx="6" cy="6" r="4"%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
+    }
+
+    &--timed-out {
+      @extend %icon;
+      background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='no'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' height='16px' width='16px' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 16 16'%3E%3Ctitle%3Etimed out%3C/title%3E%3Cg id='Page-1' fill-rule='evenodd' fill='none'%3E%3Cg id='smoke-testing-status' transform='translate%28-62 -206%29'%3E%3Cg id='timed-out' transform='translate%2850 191%29'%3E%3Cg transform='translate%2812 15%29'%3E%3Crect id='rect4970' y='0.00002' x='0' height='16' width='16'/%3E%3Ccircle id='circle4972' stroke-width='1.5' cy='8' stroke='%23E95420' cx='8' r='7.25'/%3E%3Cpolyline id='path839' stroke='%23E95420' stroke-width='2' points='11.8 11.8 7.9999 8 7.9999 3'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
     }
 
     &--success-muted {
       @extend %icon;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='" + rgba($color-mid-light, 1) + "' stroke-width='1.5' fill='" + rgba($color-mid-light, 1) + "' cx='7.25001' cy='7.25001' r='7.25001'/%3E%3Cpath fill='%23fff' d='M11.0503 4.17345l-.0659.0577-4.73475 4.14722-2.77557-2.38094-.83906.94888 3.61532 3.80373L11.75 4.96278l-.6997-.7893'/%3E%3C/g%3E%3C/svg%3E");
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cg transform='translate(1 1)' fill='none' fill-rule='evenodd'%3E%3Ccircle stroke='" + encodecolor($color-mid-light) + "' stroke-width='1.5' fill='" + encodecolor($color-mid-light) + "' cx='7.25001' cy='7.25001' r='7.25001'/%3E%3Cpath fill='%23fff' d='M11.0503 4.17345l-.0659.0577-4.73475 4.14722-2.77557-2.38094-.83906.94888 3.61532 3.80373L11.75 4.96278l-.6997-.7893'/%3E%3C/g%3E%3C/svg%3E");
     }
   }
 
-  .p-icon--power-error,
-  .icon--power-error {
+  .p-icon--power-error {
     @extend .p-icon--error;
   }
 
@@ -66,7 +64,23 @@ $status-waiting:       $color-caution;
     @include maas-icon-power-on(rgba($color-positive, .999999));
   }
 
-  .icon--pass {
+  .p-icon--power-off {
+    @extend %icon;
+    @include maas-icon-power-on(rgba($color-mid-light, .999999));
+  }
+
+  .p-icon--pass {
     @extend .p-icon--success;
   }
+
+  .p-icon--info {
+    @extend .p-icon--information;
+  }
+
+  [class^="p-icon"] {
+    margin-right: $sp-x-small;
+  }
 }
+
+
+//TODO: do something about p-icon--none
diff --git a/src/maasserver/static/scss/_utils.scss b/src/maasserver/static/scss/_utils.scss
new file mode 100644
index 0000000..a887ebf
--- /dev/null
+++ b/src/maasserver/static/scss/_utils.scss
@@ -0,0 +1,9 @@
+//does not work with colors containing alpha
+@function encodecolor($string) {
+	@if type-of($string) == 'color' {
+        $hex: str-slice(ie-hex-str($string), 4);
+        $string:unquote("#{$hex}");
+    }
+    $string: '%23' + $string;
+	@return $string;
+}
diff --git a/src/maasserver/static/scss/build.scss b/src/maasserver/static/scss/build.scss
index 832c8d5..c72ec45 100644
--- a/src/maasserver/static/scss/build.scss
+++ b/src/maasserver/static/scss/build.scss
@@ -1,5 +1,6 @@
 // Import MAAS-specific Vanilla configuration
 @import 'settings';
+@import 'utils';
 
 // Import Vanilla framework
 @import '../../../../include/nodejs/node_modules/vanilla-framework/scss/vanilla';
diff --git a/src/maasserver/templates/maasserver/zone_list.html b/src/maasserver/templates/maasserver/zone_list.html
index 4473d65..fc9f081 100755
--- a/src/maasserver/templates/maasserver/zone_list.html
+++ b/src/maasserver/templates/maasserver/zone_list.html
@@ -7,7 +7,7 @@
 
 {% block content %}
 <div id="zones">
-    <h2>Physical zones <span class="icon icon--help tooltip tooltip--right"
+    <h2>Physical zones <span class="p-icon--help tooltip tooltip--right"
           aria-label="A representation of a grouping of nodes, typically by physical location.">
     </span></h2>
     <table>
@@ -36,8 +36,8 @@
                 {% if user.is_superuser %}
                 <td class="u-align--right table--mobile-controls">
                     {% if not zone_item.is_default %}
-                    <a href="{% url 'zone-edit' zone_item.name %}" title="Edit zone {{ zone_item.name }}" class="icon icon--edit u-margin--right-small">edit</a>
-                    <a title="Delete zone {{ zone_item.name }}" class="icon icon--delete" href="{% url 'zone-del' zone_item.name %}">delete</a>
+                    <a href="{% url 'zone-edit' zone_item.name %}" title="Edit zone {{ zone_item.name }}" class="p-icon--edit u-margin--right-small">edit</a>
+                    <a title="Delete zone {{ zone_item.name }}" class="p-icon--delete" href="{% url 'zone-del' zone_item.name %}">delete</a>
                     <form method="POST" action="{% url 'zone-del' zone_item.name %}">
                         {% csrf_token %}
                         <input type="hidden" name="name" value="{{ zone_item.name }}" />