trushka

text-align: center и псевдоэлементы inline-block с отрицательными отступами
https://jsfiddle.net/trushka/24nwxndo/

У вас ИЕ, похоже, работает в режиме совместимости с ИЕ9 или ниже. Может, doctype старый, какой-нить html 4.1 указан, или вообще CMS, например, что-то левое перед doctype'ом вставляет. Или явно задан режим совместимости со старыми версиями, типа

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

Это особенность ютуба))

document.querySelector('.btn').addEventListener('click', function(e) {
    var last = document.querySelector('.card__heading-img .active');
    (document.querySelector('.card__heading-img .active+img') || document.querySelector('.card__heading-img img:first-child')).classList.add('active');
   last.classList.remove('active');
})

А кнопки лучше делать не ссылками, а специально для этого предназначенным тегом button. Потому как пользователь, например, попробовать открыть в новой вкладке может.. ну, и можно сэкономить на e.preventDefault(), так как клик по отфонарной кнопке вне формы (и даже внутри с указанным type="button") никакого действия не вызовет.. Мало того, можно временно отменить клик, установив кнопке аттрибут или свойство disabled, заодно, и css можно соответствующий задать..

В вашем случае вообще можно без замены иконок, только фильтром обойтись. В качестве бонуса ещё и transition в ФФ работать будет. И в мелкомягком edge, кстати, тоже))
https://jsfiddle.net/trushka/enm892a6/4/

codepen.io/anon/pen/pEoxJx

ну, можно на каком-нить бесплатном хостинге запилить себе сайтик, в качестве тренеровочной, так сказать, кошки.. Брать на фрилансе какие-нибуть несложные задачки - ещё и денешка какая капнет, так сказать, в процессе саморазвития))

https://jsfiddle.net/trushka/k6ft6yac/2/
Вот так примерно можно. Ну, если надо, чтоб нижняя полоса была постоянной ширины, то её можно сверху наложить с помощью ::after и transform: skewY(). Ну, и вторую (нижнюю) тень задать уже этому элементу

Для плавного перехода используйте transition. Только тогда вместо display: none для неактивных табов используйте visibility: hidden. Но там ещё могут возникнуть проблемы из-за разной высоты табов.. Но можно решить, например, установив overflow: hidden и менять высоту скрытым табам. Опять же, можно задать transition: all .3s, height 0s, а для скрытого состояния (задаём, например с помощью класса .hidden) transition: all .3s, height 0s .5s, - при скрытии "схлопнется" после затухания...
А ещё, можно вообще организовать переключение без скрипта, а с использованием псевдокласса :target. Только тогда лучше якоря скрывать с помощью display: none, чтоб страница к ним не прокручивалась, а для показывания-скрытия нужных блоков и подсвечивания активных табов использовать соседские селекторы