diff --git a/framer/Material-UI.framerfx/code/Icon.tsx b/framer/Material-UI.framerfx/code/Icon.tsx
index b7ebd57b722b75..b0d6d5f4f323e8 100644
--- a/framer/Material-UI.framerfx/code/Icon.tsx
+++ b/framer/Material-UI.framerfx/code/Icon.tsx
@@ -14,9 +14,7 @@ interface Props extends SvgIconProps {
export function Icon(props: Props): JSX.Element | null {
const { height, icon: iconProp, theme, width, ...other } = props;
- const iconName = `${iconProp && pascalCase(iconProp)}${
- theme === 'Filled' ? '' : theme
- }` as keyof typeof Icons;
+ const iconName = `${iconProp && pascalCase(iconProp)}${theme === 'Filled' ? '' : theme}`;
const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
return MuiIcon ? : null;
diff --git a/framer/scripts/templates/icon.txt b/framer/scripts/templates/icon.txt
index b5b9958cdd1254..daa39c01e7c4ca 100644
--- a/framer/scripts/templates/icon.txt
+++ b/framer/scripts/templates/icon.txt
@@ -11,9 +11,7 @@ interface Props extends SvgIconProps {
export function «componentName»(props: Props): JSX.Element | null {
const { height, icon: iconProp, theme, width, ...other } = props;
- const iconName = `${iconProp && pascalCase(iconProp)}${
- theme === 'Filled' ? '' : theme
- }` as keyof typeof Icons;
+ const iconName = `${iconProp && pascalCase(iconProp)}${theme === 'Filled' ? '' : theme}`;
const MuiIcon = Object.keys(Icons).indexOf(iconName) !== -1 ? Icons[iconName] : undefined;
return MuiIcon ? : null;
diff --git a/framer/tsconfig.json b/framer/tsconfig.json
index a71b844a9204eb..b5b0379736b92c 100644
--- a/framer/tsconfig.json
+++ b/framer/tsconfig.json
@@ -4,5 +4,5 @@
"skipLibCheck": true,
"noUnusedLocals": true
},
- "include": ["Material-UI.framerfx/code"]
+ "include": ["Material-UI.framerfx/code", "types"]
}
diff --git a/framer/types/icons.d.ts b/framer/types/icons.d.ts
new file mode 100644
index 00000000000000..acef22e4e68a6f
--- /dev/null
+++ b/framer/types/icons.d.ts
@@ -0,0 +1,2 @@
+declare module '@material-ui/icons';
+declare module '@material-ui/icons/*';