Custom Icon. How to get path to work with material format

Ignition Early Access
1 
	<svg viewBox="0 0 24 24">
		<g class="icon" id="3d_rotation">
			<path d="M197.574219 291.011719v-132.070313c0-4.199218-3.402344-7.601562-7.605469-7.601562-4.199219 0-7.601562 3.402344-7.601562 7.601562v135.910156c0 2.460938 1.1875 4.765626 3.191406 6.191407 28.394531 20.230469 45.34375 53.089843 45.34375 87.902343 0 59.464844-48.378906 107.847657-107.847656 107.847657-59.464844 0-107.847657-48.382813-107.847657-107.847657 0-34.8125 16.953125-67.671874 45.347657-87.902343 2-1.425781 3.191406-3.730469 3.191406-6.191407v-220.332031c0-32.703125 26.605468-59.3125 59.308594-59.3125 32.703124 0 59.3125 26.609375 59.3125 59.3125v54.003907c0 4.199218 3.402343 7.605468 7.601562 7.605468 4.203125 0 7.605469-3.40625 7.605469-7.605468v-54.003907c0-41.089843-33.429688-74.519531-74.519531-74.519531-41.089844 0-74.519532 33.429688-74.519532 74.519531v216.492188c-30.460937 23.222656-48.535156 59.539062-48.535156 97.933593 0 67.851563 55.203125 123.054688 123.054688 123.054688 67.855468 0 123.058593-55.203125 123.058593-123.054688 0-38.398437-18.074219-74.710937-48.539062-97.933593zm0 0" />
			<path d="M123.054688 456.238281c-13.867188 0-27.191407-4.203125-38.535157-12.15625-3.4375-2.414062-8.183593-1.582031-10.59375 1.859375-2.410156 3.4375-1.578125 8.179688 1.863281 10.589844 13.914063 9.757812 30.257813 14.914062 47.265626 14.914062 45.492187 0 82.503906-37.007812 82.503906-82.5 0-26.632812-12.976563-51.773437-34.707032-67.257812l-13.832031-9.851562v-237.316407c0-18.730469-15.234375-33.964843-33.964843-33.964843-18.726563 0-33.964844 15.234374-33.964844 33.964843v237.316407l-13.828125 9.851562c-21.734375 15.484375-34.707031 40.625-34.707031 67.257812 0 16.507813 4.878906 32.449219 14.113281 46.105469 2.351562 3.476563 7.078125 4.390625 10.558593 2.039063 3.480469-2.351563 4.390626-7.078125 2.039063-10.558594-7.523437-11.128906-11.503906-24.128906-11.503906-37.585938 0-21.726562 10.589843-42.238281 28.324219-54.871093l17.019531-12.128907c2.003906-1.425781 3.195312-3.734374 3.195312-6.191406v-29.359375h37.511719v29.359375c0 2.457032 1.1875 4.765625 3.191406 6.191406l17.023438 12.128907c17.734375 12.632812 28.320312 33.144531 28.320312 54.871093 0 37.105469-30.1875 67.292969-67.292968 67.292969zm18.757812-301.25h-37.511719v-42.890625h37.511719zm-37.511719 15.207031h37.511719v42.890626h-37.511719zm18.753907-114.433593c10.34375 0 18.757812 8.414062 18.757812 18.757812v22.371094h-37.511719v-22.371094c0-10.34375 8.414063-18.757812 18.753907-18.757812zm-18.753907 215.425781v-42.890625h37.511719v42.890625zm0 0" />
			<path d="M341.5625 170.058594c-5.304688 0-8.203125 2.035156-8.601562 6.03125-1.144532 8.964844-2.871094 22.503906-23.984376 22.503906-17.304687 0-25.71875-8.789062-25.71875-26.871094v-58.039062c0-17.832032 8.460938-26.875 25.140626-26.875 19.402343 0 24.066406 11.796875 24.5625 21.695312.214843 3.914063 3.273437 6.070313 8.601562 6.070313 5.449219 0 8.605469-1.53125 8.605469-9.375 0-20.054688-17.335938-34.058594-42.15625-34.058594-26.667969 0-41.964844 15.507813-41.964844 42.542969v58.039062c0 14.53125 4.152344 25.597656 12.34375 32.890625 7.085937 6.3125 17.261719 9.648438 29.429687 9.648438 24.933594 0 42.347657-14.242188 42.347657-34.636719 0-7.964844-3.292969-9.566406-8.605469-9.566406zm0 0" />
			<path d="M276.800781 49.445312c0-13.695312-11.144531-24.839843-24.839843-24.839843-13.699219 0-24.839844 11.144531-24.839844 24.839843 0 13.695313 11.140625 24.839844 24.839844 24.839844 13.695312 0 24.839843-11.144531 24.839843-24.839844zm-24.839843 9.632813c-5.3125 0-9.632813-4.324219-9.632813-9.632813 0-5.3125 4.320313-9.632812 9.632813-9.632812 5.308593 0 9.628906 4.320312 9.628906 9.632812 0 5.308594-4.320313 9.632813-9.628906 9.632813zm0 0" />
		</g>
	</svg>

I replaced the path of the old 3d_rotation icon and saved a new library called test.svg

It works with other icons in the file in the designer. Like accessibility icon so I know it works to some degree. Must not like my replaced path. I’ve messed around with it for a while and can’t get it to render.

Any help would be appreciated.

2

It’s something with the size of the icon. Your icon is like 600x600 and setting the viewbox to 24x24 doesn’t actually scale it down to 24x24. I played around with this before and I think it displays the top 24x24 pixel, which is your case is nothing.

Try this, put a transform statement in… (it seems to work for me)

<svg  viewBox="0 0 24 24">
 <g id="3d_rotation" class="icon" transform="scale(.053044 .046875)">
  <path d="m197.57 291.01v-132.07c0-4.1992-3.4024-7.6016-7.6055-7.6016-4.1992 0-7.6016 3.4024-7.6016 7.6016v135.91c0 2.4609 1.1875 4.7656 3.1914 6.1914 28.395 20.23 45.344 53.09 45.344 87.902 0 59.465-48.379 107.85-107.85 107.85-59.465 0-107.85-48.383-107.85-107.85 0-34.812 16.953-67.672 45.348-87.902 2-1.4258 3.1914-3.7305 3.1914-6.1914v-220.33c0-32.703 26.605-59.312 59.309-59.312 32.703 0 59.312 26.609 59.312 59.312v54.004c0 4.1992 3.4023 7.6055 7.6016 7.6055 4.2031 0 7.6055-3.4062 7.6055-7.6055v-54.004c0-41.09-33.43-74.52-74.52-74.52-41.09 0-74.52 33.43-74.52 74.52v216.49c-30.461 23.223-48.535 59.539-48.535 97.934 0 67.852 55.203 123.05 123.05 123.05 67.855 0 123.06-55.203 123.06-123.05 0-38.398-18.074-74.711-48.539-97.934z"/>
  <path d="m123.05 456.24c-13.867 0-27.191-4.2031-38.535-12.156-3.4375-2.4141-8.1836-1.582-10.594 1.8594-2.4102 3.4375-1.5781 8.1797 1.8633 10.59 13.914 9.7578 30.258 14.914 47.266 14.914 45.492 0 82.504-37.008 82.504-82.5 0-26.633-12.977-51.773-34.707-67.258l-13.832-9.8516v-237.32c0-18.73-15.234-33.965-33.965-33.965-18.727 0-33.965 15.234-33.965 33.965v237.32l-13.828 9.8516c-21.734 15.484-34.707 40.625-34.707 67.258 0 16.508 4.8789 32.449 14.113 46.105 2.3516 3.4766 7.0781 4.3906 10.559 2.0391 3.4805-2.3516 4.3906-7.0781 2.0391-10.559-7.5234-11.129-11.504-24.129-11.504-37.586 0-21.727 10.59-42.238 28.324-54.871l17.02-12.129c2.0039-1.4258 3.1953-3.7344 3.1953-6.1914v-29.359h37.512v29.359c0 2.457 1.1875 4.7656 3.1914 6.1914l17.023 12.129c17.734 12.633 28.32 33.145 28.32 54.871 0 37.105-30.188 67.293-67.293 67.293zm18.758-301.25h-37.512v-42.891h37.512zm-37.512 15.207h37.512v42.891h-37.512zm18.754-114.43c10.344 0 18.758 8.4141 18.758 18.758v22.371h-37.512v-22.371c0-10.344 8.4141-18.758 18.754-18.758zm-18.754 215.43v-42.891h37.512v42.891z"/>
  <path d="m341.56 170.06c-5.3047 0-8.2031 2.0352-8.6016 6.0312-1.1445 8.9648-2.8711 22.504-23.984 22.504-17.305 0-25.719-8.7891-25.719-26.871v-58.039c0-17.832 8.4609-26.875 25.141-26.875 19.402 0 24.066 11.797 24.562 21.695 0.21484 3.9141 3.2734 6.0703 8.6016 6.0703 5.4492 0 8.6055-1.5312 8.6055-9.375 0-20.055-17.336-34.059-42.156-34.059-26.668 0-41.965 15.508-41.965 42.543v58.039c0 14.531 4.1524 25.598 12.344 32.891 7.0859 6.3125 17.262 9.6484 29.43 9.6484 24.934 0 42.348-14.242 42.348-34.637 0-7.9648-3.293-9.5664-8.6055-9.5664z"/>
  <path d="m276.8 49.445c0-13.695-11.145-24.84-24.84-24.84-13.699 0-24.84 11.145-24.84 24.84 0 13.695 11.141 24.84 24.84 24.84 13.695 0 24.84-11.145 24.84-24.84zm-24.84 9.6328c-5.3125 0-9.6328-4.3242-9.6328-9.6328 0-5.3125 4.3203-9.6328 9.6328-9.6328 5.3086 0 9.6289 4.3203 9.6289 9.6328 0 5.3086-4.3203 9.6328-9.6289 9.6328z"/>
 </g>
</svg>
4 Likes
3

Dude, Nice!!!.

Thanks a lot!