title: om.next sablono render nested elements in a button
body: <p>Using <a href="https://github.com/omcljs/om" rel="nofollow"><code>om.next</code></a> and <a href="https://github.com/r0man/sablono" rel="nofollow"><code>sablono</code></a>, I am trying to style a button with <a href="http://www.getmdl.io/" rel="nofollow"><code>mdl</code></a>, as seen <a href="http://www.getmdl.io/components/index.html#buttons-section" rel="nofollow">there</a>.</p>
  
  <p>Here is what I tried in my <code>render</code> method :</p>
  
  <pre class="lang-clj prettyprint-override"><code>;; 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 "&lt;i class=\"material-icons\"&gt;add&lt;/i&gt;" }}]
  
  
  ;; 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"])}}]
  </code></pre>