om.next sablono визуализировать вложенные элементы в кнопку

Question

Используя om.next и sablono, я пытаюсь создать кнопку с mdl, как видно there.

Вот что я пытался в моем render метод:

;; This works but misses the icon 
[:input {:type "submit" 
     :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
     :value "ok"}] 

;; The following work, but I would like to avoid using a string 
[:button {:className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
      :dangerouslySetInnerHTML {:__html "<i class=\"material-icons\">add</i>" }}] 


;; All the following do not render the inside of the icon properly 

[:input {:type "submit" 
     :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
     :dangerouslySetInnerHTML {:__html [:i {:className "material-icons"} "add"]}}] 

[:input {:type "submit" 
     :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored"} 
[:i {:className "material-icons"} "add"]] 

[:input {:type "submit" 
     :className "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored" 
     :dangerouslySetInnerHTML {:__html ~(html [:i {:className "material-icons"} "add"])}}] 

Answer 1

мне придется взять sablono из уравнения. Этот пример работает:

(defui MDSubmitButton 
    Object 
    (render [this] 
    (dom/button (clj->js {:className "mdl-button mdl-js-button mdl-button--fab mdl-button--colored"}) 
       (dom/i (clj->js {:className "material-icons"}) "add")))) 
(def md-submit-button (om/factory MDSubmitButton {:keyfn :id})) 

Недостающий ингредиент для меня эта линия:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 

, в разметке.

В общей сложности это все разметки я использовал:

<link href="/css/material.css" rel="stylesheet" type="text/css"> 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

Я считаю, что Javascript необходим эффект волны и так далее, просто не нужно, чтобы ответить на этот вопрос.

Я подозреваю, что вы также пропустили «Иконки материалов». Чтобы узнать, что на самом деле происходит, я нажал графику/кнопку «Открыть в CodePen» с this page