Fix accessibility by adding a title to every icon

generator.js

@@ -6,11 +6,14 @@ const axios = require('axios')
 const iconURL = 'https://fonts.google.com/metadata/icons'
 
 function setup() {
+  let typesFile = "import React from 'react'\n\n"
+  typesFile +=
+    'export interface IconProps extends React.SVGProps<SVGSVGElement> {\n'
+  typesFile += '\ttitle?: string\n'
+  typesFile += '}\n'
+
   // Create types file
-  fs.writeFileSync(
-    path.join(__dirname, 'src', 'types.ts'),
-    'import React from "react" \nexport type IconProps = React.SVGProps<SVGSVGElement>'
-  )
+  fs.writeFileSync(path.join(__dirname, 'src', 'types.ts'), typesFile)
 }
 
 /**
@@ -83,6 +86,12 @@ async function getSVGFile(icon, version) {
     .replace(/enable-background/g, 'enableBackground')
     .replace(/clip-rule/g, 'clipRule')
     .replace(/fill-rule/g, 'fillRule')
+    .replace(
+      '>',
+      `><title>{props.title === undefined ? '${formatName(
+        icon
+      )}' : props.title}</title>`
+    )
 }
 
 /**

src/Icon360.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const Icon360: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'Icon360' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 7C6.48 7 2 9.24 2 12c0 2.24 2.94 4.13 7 4.77V20l4-4-4-4v2.73c-3.15-.56-5-1.9-5-2.73 0-1.06 3.04-3 8-3s8 1.94 8 3c0 .73-1.46 1.89-4 2.53v2.05c3.53-.77 6-2.53 6-4.58 0-2.76-4.48-5-10-5z" />
   </svg>

src/Icon3dRotation.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const Icon3dRotation: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'Icon3dRotation' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M7.52 21.48C4.25 19.94 1.91 16.76 1.55 13H.05C.56 19.16 5.71 24 12 24l.66-.03-3.81-3.81-1.33 1.32zm.89-6.52c-.19 0-.37-.03-.52-.08-.16-.06-.29-.13-.4-.24-.11-.1-.2-.22-.26-.37-.06-.14-.09-.3-.09-.47h-1.3c0 .36.07.68.21.95.14.27.33.5.56.69.24.18.51.32.82.41.3.1.62.15.96.15.37 0 .72-.05 1.03-.15.32-.1.6-.25.83-.44s.42-.43.55-.72c.13-.29.2-.61.2-.97 0-.19-.02-.38-.07-.56-.05-.18-.12-.35-.23-.51-.1-.16-.24-.3-.4-.43-.17-.13-.37-.23-.61-.31.2-.09.37-.2.52-.33.15-.13.27-.27.37-.42.1-.15.17-.3.22-.46.05-.16.07-.32.07-.48 0-.36-.06-.68-.18-.96-.12-.28-.29-.51-.51-.69-.2-.19-.47-.33-.77-.43C9.1 8.05 8.76 8 8.39 8c-.36 0-.69.05-1 .16-.3.11-.57.26-.79.45-.21.19-.38.41-.51.67-.12.26-.18.54-.18.85h1.3c0-.17.03-.32.09-.45s.14-.25.25-.34c.11-.09.23-.17.38-.22.15-.05.3-.08.48-.08.4 0 .7.1.89.31.19.2.29.49.29.86 0 .18-.03.34-.08.49-.05.15-.14.27-.25.37-.11.1-.25.18-.41.24-.16.06-.36.09-.58.09H7.5v1.03h.77c.22 0 .42.02.6.07s.33.13.45.23c.12.11.22.24.29.4.07.16.1.35.1.57 0 .41-.12.72-.35.93-.23.23-.55.33-.95.33zm8.55-5.92c-.32-.33-.7-.59-1.14-.77-.43-.18-.92-.27-1.46-.27H12v8h2.3c.55 0 1.06-.09 1.51-.27.45-.18.84-.43 1.16-.76.32-.33.57-.73.74-1.19.17-.47.26-.99.26-1.57v-.4c0-.58-.09-1.1-.26-1.57-.18-.47-.43-.87-.75-1.2zm-.39 3.16c0 .42-.05.79-.14 1.13-.1.33-.24.62-.43.85-.19.23-.43.41-.71.53-.29.12-.62.18-.99.18h-.91V9.12h.97c.72 0 1.27.23 1.64.69.38.46.57 1.12.57 1.99v.4zM12 0l-.66.03 3.81 3.81 1.33-1.33c3.27 1.55 5.61 4.72 5.96 8.48h1.5C23.44 4.84 18.29 0 12 0z" />
   </svg>

src/Icon4k.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const Icon4k: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'Icon4k' : props.title}</title>
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 10.5h-1V15H9.5v-1.5h-3V9H8v3h1.5V9H11v3h1v1.5zm6 1.5h-1.75l-1.75-2.25V15H13V9h1.5v2.25L16.25 9H18l-2.25 3L18 15z" />
   </svg>

src/Icon5g.tsx

@@ -8,6 +8,7 @@ const Icon5g: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>{props.title === undefined ? 'Icon5g' : props.title}</title>
     <g>
       <rect fill="none" height="24" width="24" />
     </g>

src/Icon6FtApart.tsx

@@ -8,6 +8,7 @@ const Icon6FtApart: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>{props.title === undefined ? 'Icon6FtApart' : props.title}</title>
     <rect fill="none" height="24" width="24" x="0" />
     <path d="M6,6c1.1,0,2-0.9,2-2S7.1,2,6,2S4,2.9,4,4S4.9,6,6,6z M10,9.43c0-0.81-0.48-1.53-1.22-1.85C7.93,7.21,6.99,7,6,7 C5.01,7,4.07,7.21,3.22,7.58C2.48,7.9,2,8.62,2,9.43V10h8V9.43z M18,6c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S16.9,6,18,6z M22,9.43 c0-0.81-0.48-1.53-1.22-1.85C19.93,7.21,18.99,7,18,7c-0.99,0-1.93,0.21-2.78,0.58C14.48,7.9,14,8.62,14,9.43V10h8V9.43z M19,17 v-2.01L5,15v2l-3-3l3-3v2.01L19,13v-2l3,3L19,17z M10,19v-1H7.5C7.22,18,7,18.22,7,18.5v3C7,21.78,7.22,22,7.5,22h2 c0.28,0,0.5-0.22,0.5-0.5V20c0-0.28-0.22-0.5-0.5-0.5H8V19H10z M9,20.5V21H8v-0.5H9z M17.5,19h-1v3h-1v-3h-1v-1h3V19z M12.5,19v0.5 h1v1h-1V22h-1v-4H14v1H12.5z" />
   </svg>

src/IconAcUnit.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAcUnit: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAcUnit' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M22 11h-4.17l3.24-3.24-1.41-1.42L15 11h-2V9l4.66-4.66-1.42-1.41L13 6.17V2h-2v4.17L7.76 2.93 6.34 4.34 11 9v2H9L4.34 6.34 2.93 7.76 6.17 11H2v2h4.17l-3.24 3.24 1.41 1.42L9 13h2v2l-4.66 4.66 1.42 1.41L11 17.83V22h2v-4.17l3.24 3.24 1.42-1.41L13 15v-2h2l4.66 4.66 1.41-1.42L17.83 13H22z" />
   </svg>

src/IconAccessAlarm.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAccessAlarm: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAccessAlarm' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM12.5 8H11v6l4.75 2.85.75-1.23-4-2.37V8zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7z" />
   </svg>

src/IconAccessAlarms.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccessAlarms: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccessAlarms' : props.title}
+    </title>
     <path d="M-618-568H782v3600H-618zM0 0h24v24H0z" fill="none" />
     <path d="M22 5.7l-4.6-3.9-1.3 1.5 4.6 3.9L22 5.7zM7.9 3.4L6.6 1.9 2 5.7l1.3 1.5 4.6-3.8zM12.5 8H11v6l4.7 2.9.8-1.2-4-2.4V8zM12 4c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z" />
   </svg>

src/IconAccessTime.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAccessTime: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAccessTime' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />
     <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" />

src/IconAccessibility.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccessibility: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccessibility' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 2c1.1 0 2 .9 2 2s-.9 2-2 2-2-.9-2-2 .9-2 2-2zm9 7h-6v13h-2v-6h-2v6H9V9H3V7h18v2z" />
   </svg>

src/IconAccessibilityNew.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccessibilityNew: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccessibilityNew' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M20.5 6c-2.61.7-5.67 1-8.5 1s-5.89-.3-8.5-1L3 8c1.86.5 4 .83 6 1v13h2v-6h2v6h2V9c2-.17 4.14-.5 6-1l-.5-2zM12 6c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" />
   </svg>

src/IconAccessible.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAccessible: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAccessible' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <circle cx="12" cy="4" r="2" />
     <path d="M19 13v-2c-1.54.02-3.09-.75-4.07-1.83l-1.29-1.43c-.17-.19-.38-.34-.61-.45-.01 0-.01-.01-.02-.01H13c-.35-.2-.75-.3-1.19-.26C10.76 7.11 10 8.04 10 9.09V15c0 1.1.9 2 2 2h5v5h2v-5.5c0-1.1-.9-2-2-2h-3v-3.45c1.29 1.07 3.25 1.94 5 1.95zm-6.17 5c-.41 1.16-1.52 2-2.83 2-1.66 0-3-1.34-3-3 0-1.31.84-2.41 2-2.83V12.1c-2.28.46-4 2.48-4 4.9 0 2.76 2.24 5 5 5 2.42 0 4.44-1.72 4.9-4h-2.07z" />

src/IconAccessibleForward.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccessibleForward: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccessibleForward' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <circle cx="17" cy="4.54" r="2" />
     <path d="M14 17h-2c0 1.65-1.35 3-3 3s-3-1.35-3-3 1.35-3 3-3v-2c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5zm3-3.5h-1.86l1.67-3.67C17.42 8.5 16.44 7 14.96 7h-5.2c-.81 0-1.54.47-1.87 1.2L7.22 10l1.92.53L9.79 9H12l-1.83 4.1c-.6 1.33.39 2.9 1.85 2.9H17v5h2v-5.5c0-1.1-.9-2-2-2z" />

src/IconAccountBalance.tsx

@@ -8,6 +8,9 @@ const IconAccountBalance: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>
+      {props.title === undefined ? 'IconAccountBalance' : props.title}
+    </title>
     <g>
       <rect fill="none" height="24" width="24" />
     </g>

src/IconAccountBalanceWallet.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccountBalanceWallet: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccountBalanceWallet' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M21 18v1c0 1.1-.9 2-2 2H5c-1.11 0-2-.9-2-2V5c0-1.1.89-2 2-2h14c1.1 0 2 .9 2 2v1h-9c-1.11 0-2 .9-2 2v8c0 1.1.89 2 2 2h9zm-9-2h10V8H12v8zm4-2.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
   </svg>

src/IconAccountBox.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAccountBox: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAccountBox' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z" />
   </svg>

src/IconAccountCircle.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAccountCircle: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAccountCircle' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
   </svg>

src/IconAccountTree.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAccountTree: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAccountTree' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M22 11V3h-7v3H9V3H2v8h7V8h2v10h4v3h7v-8h-7v3h-2V8h2v3z" />
   </svg>

src/IconAdUnits.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAdUnits: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAdUnits' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zM8 6h8v2H8z" />
   </svg>

src/IconAdb.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAdb: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAdb' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M5 16c0 3.87 3.13 7 7 7s7-3.13 7-7v-4H5v4zM16.12 4.37l2.1-2.1-.82-.83-2.3 2.31C14.16 3.28 13.12 3 12 3s-2.16.28-3.09.75L6.6 1.44l-.82.83 2.1 2.1C6.14 5.64 5 7.68 5 10v1h14v-1c0-2.32-1.14-4.36-2.88-5.63zM9 9c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z" />
   </svg>

src/IconAdd.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAdd: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAdd' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
   </svg>

src/IconAddAPhoto.tsx

@@ -8,6 +8,7 @@ const IconAddAPhoto: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>{props.title === undefined ? 'IconAddAPhoto' : props.title}</title>
     <rect fill="none" height="24" width="24" />
     <path d="M3,4V1h2v3h3v2H5v3H3V6H0V4H3z M6,10V7h3V4h7l1.83,2H21c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H5c-1.1,0-2-0.9-2-2V10H6z M13,19c2.76,0,5-2.24,5-5s-2.24-5-5-5s-5,2.24-5,5S10.24,19,13,19z M9.8,14c0,1.77,1.43,3.2,3.2,3.2s3.2-1.43,3.2-3.2 s-1.43-3.2-3.2-3.2S9.8,12.23,9.8,14z" />
   </svg>

src/IconAddAlarm.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddAlarm: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddAlarm' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M7.88 3.39L6.6 1.86 2 5.71l1.29 1.53 4.59-3.85zM22 5.72l-4.6-3.86-1.29 1.53 4.6 3.86L22 5.72zM12 4c-4.97 0-9 4.03-9 9s4.02 9 9 9c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm1-11h-2v3H8v2h3v3h2v-3h3v-2h-3V9z" />
   </svg>

src/IconAddAlert.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddAlert: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddAlert' : props.title}</title>
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zm8.87-4.19V11c0-3.25-2.25-5.97-5.29-6.69v-.72C13.59 2.71 12.88 2 12 2s-1.59.71-1.59 1.59v.72C7.37 5.03 5.12 7.75 5.12 11v5.82L3 18.94V20h18v-1.06l-2.12-2.12zM16 13.01h-3v3h-2v-3H8V11h3V8h2v3h3v2.01z" />
   </svg>

src/IconAddBox.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddBox: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddBox' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
   </svg>

src/IconAddBusiness.tsx

@@ -8,6 +8,7 @@ const IconAddBusiness: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>{props.title === undefined ? 'IconAddBusiness' : props.title}</title>
     <g>
       <rect fill="none" height="24" width="24" />
     </g>

src/IconAddCircle.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddCircle: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddCircle' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z" />
   </svg>

src/IconAddCircleOutline.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAddCircleOutline: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAddCircleOutline' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" />
   </svg>

src/IconAddComment.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddComment: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddComment' : props.title}</title>
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM17 11h-4v4h-2v-4H7V9h4V5h2v4h4v2z" />
   </svg>

src/IconAddIcCall.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddIcCall: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddIcCall' : props.title}</title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.28-.26.36-.65.25-1C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM21 6h-3V3h-2v3h-3v2h3v3h2V8h3z" />
   </svg>

src/IconAddLocation.tsx

@@ -3,6 +3,7 @@ import { IconProps } from './types'
 
 const IconAddLocation: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>{props.title === undefined ? 'IconAddLocation' : props.title}</title>
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm4 8h-3v3h-2v-3H8V8h3V5h2v3h3v2z" />
   </svg>

src/IconAddLocationAlt.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAddLocationAlt: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAddLocationAlt' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M20 1v3h3v2h-3v3h-2V6h-3V4h3V1h2zm-8 12c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm2-9.75V7h3v3h2.92c.05.39.08.79.08 1.2 0 3.32-2.67 7.25-8 11.8-5.33-4.55-8-8.48-8-11.8C4 6.22 7.8 3 12 3c.68 0 1.35.08 2 .25z" />
   </svg>

src/IconAddPhotoAlternate.tsx

@@ -3,6 +3,9 @@ import { IconProps } from './types'
 
 const IconAddPhotoAlternate: React.FC<IconProps> = (props) => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <title>
+      {props.title === undefined ? 'IconAddPhotoAlternate' : props.title}
+    </title>
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2h-3zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8h-3zM5 19l3-4 2 3 3-4 4 5H5z" />
   </svg>

src/IconAddRoad.tsx

@@ -8,6 +8,7 @@ const IconAddRoad: React.FC<IconProps> = (props) => (
     viewBox="0 0 24 24"
     {...props}
   >
+    <title>{props.title === undefined ? 'IconAddRoad' : props.title}</title>
     <g>
       <rect fill="none" height="24" width="24" />
     </g>