Se ao invés de
<i class="small material-icons icones">query_builder</i>
Você escrever
<i class="small material-icons icones">query_builders</i>
com um 'S' a mais, ou qualquer outra letra....
Seu ícone será renderizado como se houvesse mais um ícone após o primeiro, ou seja, a biblioteca vai renderizar o ícone para 'query_builder' e vai tentar encontrar um ícone para o 's' e não vai encontrar, mas vai deixar o espaço (no caso 30px por causa do 'small').
Se deixar um '~' ele vai gerar um '~' de 30px, Pq? Illuminatis