SVG to HTML Path

Question

this is my code:

      <div className="Aktiendashboard-AllgemeineInfo-container">
        <Tabs value={value} onChange={handleChange} aria-label="icon label tabs example">
      <Tab icon={ <SvgIcon>
        **<path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />**
      </SvgIcon>} 
      label="Company" value="Company"/>
      <Tab icon={ <SvgIcon>
        Put SVG Inside this
      </SvgIcon>} 
      label="Company" value="Company"/>
      <Tab icon={<PersonPinIcon />} label="Charts" value="Charts" />
      <Tab icon={<ApartmentIcon />} label="Valuation" value="Valuation" />
      <Tab icon={<CalculateIcon />} label="Dividende" value="Dividende" />
      <Tab icon={<PersonSearchIcon />} label="Eigentum" value="Eigentum" />
  </Tabs>

        </div>

i have some problems with .svg icons. The first icon is an arrow () and it fits very well.

But when I want to insert a different svg path it doesn't work. For example this svg path:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
 <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
 <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
 <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
 <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
</svg>

Can u help me how I can implement the svg path to my code? I want to insert the svg path from the second code snippet into the "Put SVG inside This" line. It doesn't show up anything yet

Thanks and have a great weekend

if someone have a similar problem. The solution is, that the Icon should be max 24x24 px. — HappyGilmore, May 28 '22 at 10:56

score 2 · Answer 1 · answered May 28 '22 at 13:44

if you can use html

      <Tab icon={ <SvgIcon>
        <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
          <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
          <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fill-rule="evenodd"/>
          <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fill-rule="evenodd"/>
          <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fill-rule="evenodd"/>
        </svg>
      </SvgIcon>}

if you can use react

          <Tab icon={ <SvgIcon>
            <svg width="1200pt" height="1200pt" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
              <path transform="scale(1.4168)" d="m144 759v-413l94-65 78 37.001v441" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m316 318v-130l164-133 78 79.001v251l81-52 68 35.002v391" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m453 76.999v682" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m238 281v478" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m558 385v374" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m639 333v426" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path transform="scale(1.4168)" d="m72.001 759h708v32h-709zm0 0" fill="none" stroke="#fff" strokeLinecap="round" strokeLinejoin="round" strokeWidth="20"/>
              <path d="m337.19 1075.3v-677.21l-133.18 92.09v585.12z" fill="#fff" fillRule="evenodd"/>
              <path d="m447.7 450.53v624.79h194.09v-966.23l-194.09 157.26z" fill="#fff" fillRule="evenodd"/>
              <path d="m905.31 471.78v603.54h96.34l1.418-553.95z" fill="#fff" fillRule="evenodd"/>
            </svg>
          </SvgIcon>}

SVG to HTML Path

1 Answers1