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

	<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.

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>
3 Likes

Dude, Nice!!!.

Thanks a lot!