I trying to display custom icon from static resource. I have implemented all the steps correctly but still the icons are not visible

component is :
<aura:component implements="forceCommunity:availableForAllPageTypes" access="global">
    <lightning:icon src="/sfsites/c/resource/TrainingHistoryIcon/flexitron.svg#flexitron" size="large" alternativeText="My Custom Icon"/>                                                                     
    
</aura:component>

and svg file is:
<svg id="Component_3_8" data-name="Component 3 – 8" xmlns="http://www.w3.org/2000/svg" width="66" height="66" viewBox="0 0 66 66">
  <g id="Ellipse_9" data-name="Ellipse 9" fill="none" stroke="#75c4d7" stroke-width="1.2">
    <circle cx="33" cy="33" r="33" stroke="none"/>
    <circle cx="33" cy="33" r="32.4" fill="none"/>
  </g>
  <g id="flexitron" transform="translate(22.939 16)">
    <path id="Path_1" data-name="Path 1" d="M25.11,37.519C26.972,21.166,35.931,16.45,35.931,16.45s2.234,1.753,5.3,4.15c-4.042,4.336-6.9,12-5.477,18a31.564,31.564,0,0,1,.737,8.23H34.4v-2.87A6.217,6.217,0,0,0,33,39.714a6.13,6.13,0,0,0-4.716-2.2C27.08,37.48,25.11,37.519,25.11,37.519Z" transform="translate(-23.497 -14.79)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <ellipse id="Ellipse_1" data-name="Ellipse 1" cx="4.693" cy="4.693" rx="4.693" ry="4.693" transform="translate(0 24.272)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <ellipse id="Ellipse_2" data-name="Ellipse 2" cx="1.613" cy="1.613" rx="1.613" ry="1.613" transform="translate(15.15 30.431)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <ellipse id="Ellipse_3" data-name="Ellipse 3" cx="1.645" cy="1.645" rx="1.645" ry="1.645" transform="translate(3.049 27.321)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <path id="Path_2" data-name="Path 2" d="M39.83,52.91h1.629l2.1,2.1" transform="translate(-26.798 -22.967)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <path id="Path_3" data-name="Path 3" d="M46.922,16.978l-2.5-2.079a2.527,2.527,0,0,0-3.568.326L39.84,16.443" transform="translate(-26.8 -14.31)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
    <path id="Path_4" data-name="Path 4" d="M37.95,37.225S35.8,34.7,36.926,30.019s5.05-10.069,5.05-10.069" transform="translate(-26.073 -15.575)" fill="none" stroke="#0cbfd5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.2"/>
  </g>
</svg>

I have taken reference from :
https://developer.salesforce.com/docs/component-library/bundle/lightning:icon/documentation
https://salesforce.stackexchange.com/questions/227124/custom-icons-from-static-resource-on-lightningicon-not-working