Замените значок значка MDL значок hamburgeur с svg

Question

Отчасти поэтому мне не нужно ждать, пока весь файл шрифта загрузится до отображения значка, и потому, что я читал немного discussion (pro и con) об использовании svg's вместо знаковых шрифтов я экспериментирую с использованием SVG вместо стандартного значка значков MDL для ящика Material Design Lite mdl-navigation.

В совместимых браузерах они добавляют значок, используя следующий скрипт, который я не хочу изменять, в случае обновлений.

if (this.drawer_) { 
    var drawerButton = this.element_.querySelector('.' + this.CssClasses_.DRAWER_BTN); 
    if (!drawerButton) { 
     drawerButton = document.createElement('div'); 
     drawerButton.setAttribute('aria-expanded', 'false'); 
     drawerButton.setAttribute('role', 'button'); 
     drawerButton.setAttribute('tabindex', '0'); 
     drawerButton.classList.add(this.CssClasses_.DRAWER_BTN); 
     var drawerButtonIcon = document.createElement('i'); 
     drawerButtonIcon.classList.add(this.CssClasses_.ICON); 
     drawerButtonIcon.innerHTML = this.Constant_.MENU_ICON; 
     drawerButton.appendChild(drawerButtonIcon); 
    } # etc... 
} 

Я пришел с этим:

var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); 
mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>'; 

Однако '.mdl-layout__drawer-button' не существует до тех пор, сценарий MDL не запуститься, поэтому я добавить 500мс тайм-аут, как показано на this fiddle.

Имеет ли смысл мой подход? Это более надежный способ запустить мою функцию после запуска MDL-кода?

UPDATE:

Попытка немного другой метод теперь использует рекурсивную функцию с тестом для .mdl-layout__drawer-button не будучи нуль:

//Replace MDL icon with our sprite 
function mdl_drawer_btn() { 
    var mdl_drawer_button = document.querySelector('.mdl-layout__drawer-button'); 
    if (mdl_drawer_button != null) { 
     mdl_drawer_button.innerHTML = '<svg viewBox="0 0 100 100" class="icon nav-icon"><use xlink:href="#nav-icon"></use></svg>'; 
     } else { 
     setTimeout(mdl_drawer_btn, 100); 
     } 
    } 

setTimeout(mdl_drawer_btn, 100); 

Answer 1

Трудно советовать, не зная, как осуществляется весь ваш сайт, но Я бы подумал, что этого должно быть достаточно, чтобы поместить ваш скрипт в качестве последнего скрипта на странице. Затем, чтобы убедиться, что все изменения DOM, выполненные предыдущими сценариями, завершены, заверните его в тайм-аут 0 мс.

setTimeout(mdl_drawer_btn, 0);