diff --git a/interface/carto_ol.htm b/interface/carto_ol.htm
index 534ac31..4cd0569 100755
--- a/interface/carto_ol.htm
+++ b/interface/carto_ol.htm
@@ -159,8 +159,8 @@
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -171,8 +171,8 @@
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -185,30 +185,30 @@
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
 			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/gm.phtml b/interface/gm.phtml
index 59e7bf1..e89eea4 100755
--- a/interface/gm.phtml
+++ b/interface/gm.phtml
@@ -174,8 +174,8 @@ include("../ms_configura.php");
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -186,8 +186,8 @@ include("../ms_configura.php");
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -199,31 +199,31 @@ include("../ms_configura.php");
 				Variaveis javascript:
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
-			<div onclick="i3GEO.guias.ativa('adiciona',this)"  data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/openlayers.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/gmdebug.phtml b/interface/gmdebug.phtml
index 16bfd4c..1cffa5f 100755
--- a/interface/gmdebug.phtml
+++ b/interface/gmdebug.phtml
@@ -174,8 +174,8 @@ include("../ms_configura.php");
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -186,8 +186,8 @@ include("../ms_configura.php");
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -199,31 +199,31 @@ include("../ms_configura.php");
 				Variaveis javascript:
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
-			<div onclick="i3GEO.guias.ativa('adiciona',this)"  data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/openlayers.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/googlemaps_noite.phtml b/interface/googlemaps_noite.phtml
index 7d45ddb..f0c8272 100755
--- a/interface/googlemaps_noite.phtml
+++ b/interface/googlemaps_noite.phtml
@@ -174,8 +174,8 @@ include("../ms_configura.php");
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -186,8 +186,8 @@ include("../ms_configura.php");
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -199,31 +199,31 @@ include("../ms_configura.php");
 				Variaveis javascript:
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
-			<div onclick="i3GEO.guias.ativa('adiciona',this)"  data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/openlayers.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/ol.htm b/interface/ol.htm
index d5589af..9b4ec44 100755
--- a/interface/ol.htm
+++ b/interface/ol.htm
@@ -159,8 +159,8 @@
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -171,8 +171,8 @@
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -185,30 +185,30 @@
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
 			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/openlayersdebug.htm b/interface/openlayersdebug.htm
index 0a55ab7..eaeb8e0 100755
--- a/interface/openlayersdebug.htm
+++ b/interface/openlayersdebug.htm
@@ -159,8 +159,8 @@
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -171,8 +171,8 @@
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -185,30 +185,30 @@
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
 			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/osm.htm b/interface/osm.htm
index 3f5eabe..c5fac7a 100755
--- a/interface/osm.htm
+++ b/interface/osm.htm
@@ -159,8 +159,8 @@
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -171,8 +171,8 @@
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -185,30 +185,30 @@
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
 			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
diff --git a/interface/osmdebug.htm b/interface/osmdebug.htm
index ec4c95f..88e81e5 100755
--- a/interface/osmdebug.htm
+++ b/interface/osmdebug.htm
@@ -159,8 +159,8 @@
 				data-idMigalha - id do DIV que sera utilizado para mostrar o link de retorno ao nivel anterior
 			-->
 			<div data-idconteudo="guia8obj" data-idLinks="listaFerramentasLinks" data-idMigalha="migalhaFerramentas" data-idLista="listaFerramentas" onclick="i3GEO.guias.ativa('ferramentas',this)">
-				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tools.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeFerramentas}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">business_center</i>
 				</button>
 			</div>
 			<!-- temas existentes no mapa
@@ -171,8 +171,8 @@
 					do metadata existente na camada. Deixe vazio para nao ativar a operacao.
 			-->
 			<div onclick="i3GEO.guias.ativa('temas',this)" data-verificaAbrangencia="" data-idconteudo="guia1obj" data-idListaFundo="listaFundo" data-idListaDeCamadas="listaTemas" style="margin-top: 3px;">
-				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/layer.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeMapa}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons"><i class="material-icons">visibility</i></i>
 				</button>
 			</div>
 			<!-- catalogo de adicao de temas ao mapa
@@ -185,30 +185,30 @@
 				i3GEO.catalogoMenus.IDSMENUS - (array) apenas os menus com idmenu que constem nessa lista serao mostrados. Por default e vazio.
 			-->
 			<div onclick="i3GEO.guias.ativa('adiciona',this)" data-idconteudo="guia2obj" data-idMigalha="catalogoMigalha" data-idNavegacao="catalogoNavegacao" data-idCatalogo="catalogoPrincipal" data-idMenus="catalogoMenus" style="margin-top: 3px;">
-				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/catalogo.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeCatalogo}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">layers</i>
 				</button>
 			</div>
 			<!-- legenda -->
 			<div onclick="i3GEO.guias.ativa('legenda',this)" data-idconteudo="guia4obj" data-idLegenda="legendaHtml" style="margin-top: 3px;">
-				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/legenda.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeLegenda}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">view_list</i>
 				</button>
 			</div>
 			<div class="hidden-xs hidden-sm" onclick="i3GEO.guias.ativa('dobraPagina',this)" style="margin-top: 3px;">
-				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img id="iconeTrocaInterface" src="../imagens/googlemaps.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{trocaInterface}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">compare_arrows</i>
 				</button>
 			</div>
 			<!-- Busca -->
 			<div onclick="i3GEO.guias.ativa('buscaRapida',this)" data-idconteudo="guia7obj" style="margin-top: 3px;">
-				<button class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/search.png" style="cursor: pointer; padding: 3px;">
+				<button class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">search</i>
 				</button>
 			</div>
 			<div onclick="i3GEO.guias.ativa('identificaBalao',this)" style="margin-top: 3px;" >
-				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="box-shadow: none;">
-					<img src="../imagens/gisicons/tips.png" style="cursor: pointer; padding: 3px;">
+				<button title="{{{iconeBalao}}}" class="btn btn-default iconeGuiaMovel" style="color:white;box-shadow: none;">
+					<i class="material-icons">location_on</i>
 				</button>
 			</div>
 			<!-- A opcao de identificacao esta integrada ao balao de informacoes, mas pode aparecer aqui tambem
--
libgit2 0.21.2