Alternative to ligtning:icon in Lightning Component (Reusable SVG Lighting Component)

Requirement:
Multiple rows with close option should be displayed. On click on close icon beside a specific row it should be cleared. There is a need to give index for the icon if you use lightning:icon you cannot assign dynamic id as aura:id won't support dynamic value.

To achieve the above requirement it should be a html button/ html icon. To should the svg icon without using lighting:icon following approach will be helpful.

Reusable Lighting Component for svg icon -
Usage for the above component -
Note:
Go to LightingDesignSystem Website > Icons > save as the icon in IE browser (It should be saved in svg format). You can open the file in note pad and copy the pathd.