Custom form renderer – nested elements

Hello,

I am quite new to Nette and I am trying to customize the form renderer to display the icon inside text input (http://getbootstrap.com/components/#…). I was trying to alter the prototype of TextBase to add the icon:

if ($control instanceof Controls\TextBase) {
        $icon = HTML::el("span")->addClass('input-group-addon glyphicon glyphicon-th');
        $control->getControlPrototype()->addClass("form-control")->add($icon);

However, that did not work (in the form, the span was not rendered at all). Following example shows my steps and what I am trying to achieve.

<?php
include __DIR__ . '/../vendor/autoload.php' ;

use Nette\Forms\Form,
    Nette\Forms\Controls,
    Tracy\Debugger,
    Nette\Utils\HTML,
    Tracy\Dumper;
Debugger::enable();
$form = new Form;
$form->addText('test', 'Test');


$renderer = $form->getRenderer();
$renderer->wrappers["label"]["container"] = NULL;
$renderer->wrappers["controls"]["container"] = NULL;
$renderer->wrappers["control"]["container"] = NULL;
$renderer->wrappers["pair"]["container"] = HTML::el("div")->addClass('input-group');
foreach ($form->getControls() as $control) {
    if ($control instanceof Controls\TextBase) {
        $icon = HTML::el("span")->addClass('input-group-addon glyphicon glyphicon-th');
        $control->getControlPrototype()->addClass("form-control")->add($icon);
        dump($control->getControlPrototype());
    }
}

?>

<link rel="stylesheet" media="screen" href="//netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<h1>Actual Output</h1>
<?php
echo $form;
?>
<h1>Desired Output</h1>
<div class="input-group">
  <input type="text" class="form-control"><span class="input-group-addon glyphicon glyphicon-th"></span>
</div>

and this is the rendered HTML

<div class="input-group">
	<label for="frm-test">Test</label>

	<input type="text" name="test" class="form-control text" id="frm-test">
</div>

Thank you for any suggestions!