fix: example-viewer icons and animation (#52)

- changed codepen icon to a generic icon
- added tooltips

Author: EladBezalel

material.angular.io/src/app/shared/example-viewer/example-viewer.html

@@ -2,7 +2,8 @@
   <div class="docs-example-viewer-title">
     <div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
 
-    <button md-icon-button type="button" (click)="toggleSourceView()">
+    <button md-icon-button type="button" (click)="toggleSourceView()"
+            [mdTooltip]="'View source'">
       <md-icon>
         <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
           <path fill="none" d="M0 0h24v24H0V0z"></path>

material.angular.io/src/app/shared/plunker/plunker-button.html

@@ -1,9 +1,10 @@
 <!-- TODO: change the template to be plunker icon -->
-<button md-icon-button type="button" (click)="openPlunker()">
+<button md-icon-button type="button" (click)="openPlunker()"
+        [mdTooltip]="'Edit in Plunker'">
   <md-icon>
-    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 500" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
-      <path d="M250 0C111.928 0 0 111.927 0 250c0 138.077 111.927 250 250 250 138.073 0 250-111.923 250-250C500 111.928 388.073 0 250 0zm0 458.943C134.79 458.943 41.06 365.21 41.06 250c0-115.207 93.73-208.94 208.94-208.94S458.94 134.793 458.94 250c0 115.21-93.73 208.943-208.94 208.943z"></path>
-      <path d="M404.462 201.172c-.028-.195-.076-.382-.11-.577-.064-.374-.134-.748-.23-1.114-.058-.22-.14-.43-.207-.64-.106-.327-.212-.652-.342-.97-.09-.22-.196-.438-.297-.65-.14-.3-.285-.593-.452-.877-.122-.212-.25-.416-.377-.618-.18-.277-.362-.546-.562-.806-.146-.195-.3-.39-.454-.578-.21-.243-.43-.487-.663-.716-.174-.178-.346-.357-.528-.52-.245-.22-.497-.432-.753-.634-.198-.155-.395-.31-.602-.456-.078-.05-.146-.114-.22-.163L257.37 97.656c-4.465-2.976-10.275-2.976-14.74 0l-141.294 94.196c-.073.05-.142.114-.22.163-.207.146-.402.3-.597.456-.26.204-.513.416-.753.634-.187.164-.357.342-.533.52-.23.23-.45.474-.658.717-.16.19-.313.384-.46.578-.194.26-.382.53-.556.806-.134.203-.26.406-.382.618-.163.284-.31.577-.45.877-.103.21-.21.43-.298.65-.13.317-.236.642-.34.968-.07.21-.147.422-.21.642-.096.366-.16.74-.23 1.114-.032.195-.08.382-.106.577-.077.57-.122 1.147-.122 1.733V297.1c0 .585.044 1.162.122 1.74.025.188.074.382.106.568.07.374.134.748.23 1.114.063.22.14.432.21.643.104.324.21.65.34.975.09.222.195.433.297.645.143.3.29.592.45.885.123.204.25.406.383.61.174.276.362.545.557.806.146.203.3.39.46.577.207.243.426.488.657.716.175.177.346.356.533.52.24.22.492.43.752.634.194.155.39.31.597.454.077.05.146.115.22.163L242.63 402.35c2.232 1.487 4.803 2.236 7.372 2.236 2.566 0 5.135-.75 7.368-2.236l141.295-94.197c.074-.047.142-.112.22-.162.207-.145.403-.3.602-.454.256-.203.508-.414.752-.635.182-.163.353-.343.527-.52.232-.23.452-.474.664-.717.155-.187.31-.374.455-.577.2-.26.383-.53.562-.806.126-.204.255-.406.377-.61.167-.293.312-.585.452-.885.1-.212.206-.423.297-.645.13-.324.235-.65.342-.975.068-.21.15-.423.206-.643.1-.366.168-.74.233-1.114.033-.187.08-.38.11-.568.072-.578.118-1.155.118-1.74v-94.197c0-.585-.045-1.162-.118-1.73zm-141.176-67.64l104.088 69.388-46.493 31.103-57.594-38.527v-61.963zm-26.57 0v61.964l-57.593 38.527-46.497-31.103 104.09-69.387zm-114.726 94.24L155.228 250l-33.238 22.233V227.77zm114.725 138.7l-104.088-69.39 46.497-31.093 57.592 38.52v61.96zM250 281.43L203.014 250 250 218.574l46.986 31.428L250 281.432zm13.286 85.04v-61.963l57.595-38.52 46.494 31.093-104.088 69.388zm114.724-94.238L344.777 250l33.233-22.23v44.464z"></path>
+    <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
+      <path d="M0 0h24v24H0z" fill="none"/>
+      <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
     </svg>
   </md-icon>
 </button>