ThePositree

Если делать через JS, то Вам нужно менять не width, а initial-scale. Рассчитывать его и менять.
Но лучше делать это через CSS, мне кажется это будет более производительно (предположение)
p.s. Копипастить код не обязательно, есть же тернарные операторы

const mediaQueryList = window.matchMedia('(max-width: 570px)');

mediaQueryList.addEventListener('change', () => {
  document.querySelector('meta[name="viewport"]').setAttribute(
    'content',
    'width=device-width, user-scalable=no, initial-scale=' +
      (mediaQueryList.matches ? document.clientWidth / 570 : 1.0)
  );
});
mediaQueryList.dispatchEvent(new Event('change')); // Это эмулирует событие

не знаю, возможно есть более простой путь - я делал таким образом:
1. Скачиваем весь шрифт, если он оказывался не в svg формате, а как правило это так, то на он-лайн сервис конвертируем шрифт в svg - пример сервиса.
2. Идем на icomoon.io - там в правом верхнем углу жмем IcoMoon App
3. Теперь в левом верхнем углу - import Icons или в правом по бургеру - Import to Set - и выбираем сконвертируемый шрифт в svg формате.
4. В верхней меню плашке выбираем инструмент карандаш (edit) и на нужную иконку - в окне редактирования видим кнопку Download SVG.