align svg elements using "symbol" and "use" method - html

Question

I have created a svg icon pack with the help of svg symbol so that I can use it later. I am using it with the help of svg use. Now my question is, is there any way to align the svg vertically and horizontally center. I have tried using position:absolute and flexbox but no success.
I also played with width, height and viewbox property of svg but no success
.carousel-control {
width: 30px;
height: 30px;
background: #fff;
left: 0;
top: 0;
border-radius: 50%;
border: 1px solid #faad40;
text-align: center;
display: inline-block;
position: relative;
}
svg.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="arrow-up" viewBox="0 0 30 30">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M0.096,3.259 C-0.045,3.395 -0.045,3.622 0.096,3.763 C0.232,3.900 0.458,3.900 0.593,3.763 L3.141,1.205 L3.141,9.647 C3.141,9.844 3.297,10.000 3.493,10.000 C3.689,10.000 3.849,9.844 3.849,9.647 L3.849,1.205 L6.392,3.763 C6.533,3.900 6.759,3.900 6.895,3.763 C7.035,3.622 7.035,3.395 6.895,3.259 L3.744,0.095 C3.608,-0.046 3.382,-0.046 3.247,0.095 L0.096,3.259 Z"/>
</symbol>
<symbol id="arrow-down" viewBox="0 0 30 30">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M6.873,6.720 C7.013,6.584 7.013,6.358 6.873,6.217 C6.738,6.081 6.513,6.081 6.378,6.217 L3.842,8.767 L3.842,0.352 C3.842,0.156 3.687,-0.000 3.492,-0.000 C3.296,-0.000 3.136,0.156 3.136,0.352 L3.136,8.767 L0.605,6.217 C0.465,6.081 0.240,6.081 0.105,6.217 C-0.035,6.358 -0.035,6.584 0.105,6.720 L3.241,9.874 C3.377,10.014 3.602,10.014 3.736,9.874 L6.873,6.720 Z"/>
</symbol>
</svg>
<a class="left carousel-control"><svg class="icon" width="30px" height="30px;"><use xlink:href="#arrow-up" /></svg></a>
<a class="left carousel-control"><svg class="icon" width="30px" height="30px;"><use xlink:href="#arrow-up" /></svg></a>

Answer 1

You need to decrease the viewBox to cover only the icon shape. Actually it's set to go up to 30 and the width/height of the SVG is 30px (same as the container) so it is centred but the path inside the SVG is not.
You may then specify any dimension to your icon, not necessarily the same as the viewbox:
.carousel-control {
width: 30px;
height: 30px;
background: #fff;
border-radius: 50%;
border: 1px solid #faad40;
display: inline-flex;
vertical-align:top;
align-items:center;
justify-content:center;
position: relative;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="arrow-up" viewBox="0 0 8 10">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M0.096,3.259 C-0.045,3.395 -0.045,3.622 0.096,3.763 C0.232,3.900 0.458,3.900 0.593,3.763 L3.141,1.205 L3.141,9.647 C3.141,9.844 3.297,10.000 3.493,10.000 C3.689,10.000 3.849,9.844 3.849,9.647 L3.849,1.205 L6.392,3.763 C6.533,3.900 6.759,3.900 6.895,3.763 C7.035,3.622 7.035,3.395 6.895,3.259 L3.744,0.095 C3.608,-0.046 3.382,-0.046 3.247,0.095 L0.096,3.259 Z"/>
</symbol>
<symbol id="arrow-down" viewBox="0 0 8 10">
<path fill-rule="evenodd" fill="rgb(0, 0, 0)" d="M6.873,6.720 C7.013,6.584 7.013,6.358 6.873,6.217 C6.738,6.081 6.513,6.081 6.378,6.217 L3.842,8.767 L3.842,0.352 C3.842,0.156 3.687,-0.000 3.492,-0.000 C3.296,-0.000 3.136,0.156 3.136,0.352 L3.136,8.767 L0.605,6.217 C0.465,6.081 0.240,6.081 0.105,6.217 C-0.035,6.358 -0.035,6.584 0.105,6.720 L3.241,9.874 C3.377,10.014 3.602,10.014 3.736,9.874 L6.873,6.720 Z"/>
</symbol>
</svg>
<a class="left carousel-control"><svg class="icon" width="6"><use xlink:href="#arrow-up" /></svg></a>
<a class="left carousel-control"><svg class="icon" width="12" ><use xlink:href="#arrow-down" /></svg></a>