Add download icon

apps/squareone/src/components/TimesSquareGitHubPagePanel/IpynbDownloadLink.js

@@ -1,12 +1,25 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
 export default function IpynbDownloadLink({ url, sourcePath }) {
   // get the filename from the sourcePath
   const filename = sourcePath.split('/').pop();
 
   return (
-    <p>
-      <a href={url} download={filename}>
-        Download notebook
+    <StyledP>
+      <a href={url} title={filename} download={filename}>
+        <StyledFontAwesomeIcon icon="download" /> Download notebook
       </a>
-    </p>
+    </StyledP>
   );
 }
+
+const StyledP = styled.p`
+  margin-top: 1rem;
+`;
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.2em;
+  font-size: 1em;
+  color: ${(props) => props.color || 'inherit'};
+`;

apps/squareone/src/styles/icons.js

@@ -13,6 +13,7 @@ import {
   faCircleCheck,
   faCircleMinus,
   faCodeCommit,
+  faDownload,
 } from '@fortawesome/free-solid-svg-icons';
 import { faGithub } from '@fortawesome/free-brands-svg-icons';
 
@@ -25,4 +26,5 @@ library.add(faCircleXmark);
 library.add(faCircleCheck);
 library.add(faCircleMinus);
 library.add(faCodeCommit);
+library.add(faDownload);
 library.add(faGithub);