Custom App Icon Component

src/components/app.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import MaterialIcon from 'material-icons-react';
+import Icon from './icon';
 import styled from 'styled-components';
 import selectedTheme from './themeManager';
 
@@ -43,7 +43,7 @@ const AppDescription = styled.p`
 export const App = ({ name, icon, url, displayURL }) => (
     <AppContainer>
         <IconContainer>
-            <MaterialIcon icon={icon} color={selectedTheme.mainColor} />
+            <Icon name={icon} color={selectedTheme.mainColor} />
         </IconContainer>
         <DetailsContainer>
             <AppLink href={url}>{name}</AppLink>

src/components/icon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const IconContainer = styled.i`
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+`;
+
+export const Icon = ({ name, color, size }) => {
+    let Container = IconContainer;
+
+    if (size) {
+        Container = styled(IconContainer)`
+            text-color: ${color};
+            font-size: ${size};
+        `;
+    }
+
+    return <Container>{name}</Container>;
+};
+
+export default Icon;